用 hidden 属性控制显隐最稳妥，它隐藏元素并暂停内部媒体、处理焦点和可访问性；display: none 仅视觉隐藏，不释放资源、不暂停媒体、不重置焦点；推荐 hidden + data-tab 实现标签切换，或 aria-hidden 配合 CSS 类提升健壮性。
用 hidden 属性控制显隐最稳妥，它不只是隐藏元素，还会暂停内部 <video>、<audio>、<iframe>，自动处理焦点和可访问性状态；比 display: none 更可靠，也比纯 CSS 的 :target 或 :checked 方案更易维护、可扩展。
为什么别直接用 display: none 切换
它会让浏览器“假装看不见”，但实际仍在渲染流里做无用功；更关键的是，它不触发媒体暂停、不释放 iframe 资源、不重置表单焦点——这些不是 bug，是设计如此。
-
<video>在display: none下可能继续缓冲甚至播放（尤其 Safari） - 含
<input>的面板切走后，再切回时焦点丢失、滚动位置归零 - 如果用了 Vue/React，
v-if会销毁组件实例，v-show才等价于display切换
用 hidden + data-tab 实现基础切换
核心是让按钮和面板通过 data-tab 建立映射，不依赖 DOM 顺序或 ID，避免复用冲突。
- 每个标签按钮用
<button type="button">，防止意外触发表单提交 - 按钮加
data-tab="home"，对应面板加id="panel-home"和hidden - 首次加载时必须手动移除默认面板的
hidden，否则白屏 - JS 切换逻辑只需两步：所有面板设
p.hidden = true，目标面板设p.hidden = false
<button type="button" data-tab="home">首页</button>
<button type="button" data-tab="about">关于</button>
<div id="panel-home" role="tabpanel">首页内容</div>
<div id="panel-about" role="tabpanel" hidden>关于内容</div>
<script>
document.querySelectorAll('[data-tab]').forEach(btn => {
btn.addEventListener('click', () => {
const tab = btn.dataset.tab;
document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true);
document.querySelector(`#panel-${tab}`).hidden = false;
});
});
</script>
用 aria-hidden + class 控制更健壮
如果内容区需要动态渲染（比如从 API 加载），或要兼容主题切换、动画控制、无障碍要求，推荐用 aria-hidden 配合 CSS 类，而不是直接操作 hidden 属性或 style.display。
立即学习“前端免费学习笔记（深入）”；
- CSS 规则写成
.tab-pane[aria-hidden="true"] { display: none; } - JS 只负责设
panel.setAttribute('aria-hidden', 'true')和button.setAttribute('aria-selected', 'false') - 面板需加
tabindex="0"，确保可聚焦；键盘用户 Tab 导航时焦点落在当前激活的button[role="tab"]上 - 事件绑定要防 DOM 未就绪：脚本放
<body>底部，或包在document.addEventListener('DOMContentLoaded', ...)
最容易被忽略的是：hidden 是 HTML 原生属性，但它不触发 CSS 过渡动画；想加淡入效果，得配合 opacity 和 transition，且要手动控制 aria-hidden 和类名同步更新，否则屏幕阅读器和视觉状态会不一致。
