最轻量可靠的方式是用hidden属性+data-tab映射+语义化button——hidden使浏览器真正忽略元素，自动暂停视频、卸载iframe、跳过读屏器；而display:none仅视觉隐藏，仍触发渲染和资源消耗。
用原生 HTML + CSS + JS 切换标签页，最轻量、最可靠的方式是组合使用 hidden 属性、data-tab 映射和语义化 <button> —— 不依赖框架，不触发重排，还能自动暂停视频、卸载 iframe、跳过读屏器。
为什么不用 display: none？
display: none 只是视觉隐藏，DOM 仍在渲染流中运行。常见副作用包括：
• <video> 在 Safari 下持续缓冲甚至静音播放
• <iframe> 不卸载，仍占用资源并可能执行脚本
• 表单控件（如 <input>）切走后焦点丢失、输入值被清空
• 屏幕阅读器仍会读出内容（尤其没配 aria-hidden 时）
• CSS 动画无法在 display: none 元素上触发
怎么用 hidden 实现正确切换？
浏览器对 hidden 是真“忽略”：媒体暂停、iframe 卸载、表单失焦、读屏器跳过——这是 HTML5 规范行为，不是 hack。
只需一行 CSS 就能统一接管样式：
[hidden] { display: none; }之后所有显隐逻辑交给 JS 控制 hidden 属性即可。实操要点：
- 每个标签按钮写：
<button type="button" data-tab="profile">个人资料</button> - 对应面板写：
<div id="panel-profile" hidden role="tabpanel" aria-labelledby="tab-profile"></div> - JS 切换时只操作：
document.querySelector(`#panel-${tab}`).hidden = false - 首次加载必须手动移除默认面板的
hidden，否则白屏
键盘导航和无障碍支持不能靠“差不多”
没加 ARIA 的 tab 列表，对键盘用户和盲人用户就是一堆不可聚焦、不可识别的 <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>自动支持；左右方向键需 JS 补全监听ArrowLeft/ArrowRight—— 这是真实项目里最容易漏掉的一环
data-tab 比 ID 或 DOM 顺序更健壮
用 data-tab="settings" 绑定按钮与面板，比靠 id="tab-settings" 或兄弟节点索引更安全——组件复用、动态插入、服务端渲染时不会因 ID 冲突或 DOM 移动而错位。
例如：
- 按钮：
<button type="button" data-tab="settings">设置</button> - 面板：
<div id="panel-settings" hidden></div> - JS 查找目标：
document.querySelector(`#panel-${e.target.dataset.tab}`)
复杂点在于：每次切换都要同步更新至少 5 个属性（hidden、aria-hidden、aria-selected、tabindex、class），少一个就可能让键盘用户卡住或读屏器误读。别图省事只改样式。
