hidden属性+data-tab映射+原生button是最轻量、可靠且无障碍的标签切换方案，它原生支持媒体暂停、iframe卸载、读屏器跳过，语义正确且无需框架。
用 hidden 属性 + data-tab 映射 + 原生 <button></button> 是目前最轻量、最可靠、最无障碍的 HTML 标签切换实现方式。它不依赖 JS 框架，不触发重排，还能自动暂停 <video></video>、释放 <iframe></iframe> 资源，比 display: none 更符合语义和实际行为。
为什么 hidden 比 display: none 更适合标签切换
hidden 是 HTML5 原生布尔属性，浏览器会真正“忽略”被标记的元素：内部媒体停止缓冲、<iframe></iframe> 卸载、表单控件失焦、读屏器跳过——这些不是副作用，是规范要求。而 display: none 只是视觉隐藏，DOM 仍在渲染流中运行，容易导致：
-
<video></video>在 Safari 下持续加载甚至静音播放 - 切走含
<input>的面板后，再切回时焦点丢失、滚动位置重置 - 屏幕阅读器仍能读出
display: none内容（尤其当没配aria-hidden） - CSS 动画无法在
display: none元素上触发
只需一行 CSS 就能统一接管样式：[hidden] { display: none; }，后续所有显隐逻辑都交给 JS 控制 hidden 属性即可。
data-tab 关联比 ID 或 DOM 顺序更健壮
用 data-tab="profile" 绑定按钮与面板，比靠 id="tab-profile" 或兄弟节点索引更安全——组件复用、动态插入、服务端渲染时不会因 ID 冲突或 DOM 移动而错位。
- 每个 tab 按钮写：
<button type="button" data-tab="settings">设置</button> - 对应面板写：
<div id="panel-settings" hidden role="tabpanel" aria-labelledby="tab-settings">...</div> - JS 切换时只操作：
document.querySelector(`#panel-${tab}`).hidden = false - 首次加载必须手动移除默认面板的
hidden，否则白屏
键盘导航和读屏器支持不能靠“差不多”
没加 ARIA 的 tab 列表，对键盘用户和盲人用户就是一堆不可聚焦、不可识别的 <button></button>。必须同步三组状态：
- 外层容器加
role="tablist" - 每个按钮加
role="tab"、aria-controls="panel-profile"、tabindex="0"（激活态保留，非激活态设为-1） - 对应面板加
role="tabpanel"、aria-hidden="false"（激活时）、aria-labelledby指回按钮 - 切换时同步
aria-selected="true"和aria-hidden，别只改 class 或 style
空格/回车触发由原生 <button></button> 自动支持，无需额外监听 keydown ——但左右方向键切换需 JS 补全，这是真实项目里最容易漏掉的一环。
纯 CSS 方案（:target 或 radio）的硬伤在哪
:target 方案会让 URL 变成 #profile，刷新即回到该 tab，看似方便，实则破坏 SPA 体验；radio 方案依赖相邻兄弟选择器（:checked ~ #panel），内容区必须严格放在对应 <input> 后面，且 Safari 旧版、NVDA 等读屏器对其支持不稳定。
-
:target无法响应后退/前进按钮以外的导航（比如 JS 修改 hash 不触发样式重算） -
radio的name必须全局唯一，多组 tab 并存时极易冲突 - 两者都不支持键盘方向键切换，也不提供
aria-selected同步机制 - 表单提交时若误用
<button></button>未设type="button"，会触发表单重载
真正需要“简洁高性能”的场景，往往也要求“可访问、可维护、可扩展”，这时候少几行 JS 换来的技术债，远比多写十行健壮逻辑更贵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
