hidden属性控制显隐最稳妥，它不仅隐藏元素，还暂停video/audio/iframe、自动处理焦点与可访问性；需配合data-tab映射、aria属性及js手动切换hidden状态实现完整标签页功能。
直接用 hidden 属性控制显隐最稳妥，比 display: none 更可靠——它不只是隐藏，还会暂停内部 <video></video>、<audio></audio>、<iframe></iframe>，且自动处理焦点和可访问性状态。
怎么用 hidden 实现基础切换
核心是让按钮和面板通过 data-tab 建立映射，不依赖 DOM 顺序或 ID，避免复用冲突。
- 每个标签按钮用
<button type="button"></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>
为什么别直接用 display: none 切换
它会让浏览器“假装看不见”，但实际仍在渲染流里做无用功；更关键的是，它不触发媒体暂停、不释放 iframe 资源、不重置表单焦点——这些不是 bug，是设计如此。
-
<video></video>在display: none下可能继续缓冲甚至播放（尤其 Safari） - 含
<input>的面板切走后，再切回时焦点丢失、滚动位置归零 - 如果用了 Vue/React，
v-if会销毁组件实例，v-show才等价于display切换 -
hidden是 HTML5 原生语义属性，CSS 可用[hidden] { display: none; }统一接管样式
如何支持键盘导航和屏幕阅读器
没加 ARIA 的标签页，在盲人用户或键盘党眼里就是一堆不可操作的 div。
- 外层容器加
role="tablist"，每个按钮加role="tab"和aria-controls="panel-home" - 激活态按钮设
aria-selected="true"，其他为"false"；对应面板设aria-hidden="false" - 监听
ArrowLeft/ArrowRight键，用focus()移动焦点，别只改视觉 class - 面板加
tabindex="0"，确保能被 Tab 键进入（尤其当内容区本身不可聚焦时）
纯 CSS 方案适合什么场景
用 :target 伪类实现零 JS 切换，简单静态页够用，但有硬伤。
- URL 会变，比如从
/page.html变成/page.html#tab2，影响分享和 SEO - 无法做淡入、滑动等过渡动画（
:target不支持 transition） - 首次加载无 hash 时所有内容都隐藏，必须手动加
id="tab1"到默认面板并设:target默认显示 - 不能动态增删标签，也不支持程序化控制（比如从 URL 参数初始化当前 tab）
真正要兼顾状态保持、无障碍、动画和可控性，hidden + 显式 JS 控制仍是目前最平衡的选择。容易被忽略的是：切换前后记得同步更新 aria-selected 和 aria-hidden，否则屏幕阅读器读出来的永远是“未选中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
