hidden 属性比 display: none 更适合多面板切换，因其语义化停用元素（视频暂停、iframe 卸载、读屏器跳过），而 display: none 仅视觉隐藏；需配合 data-tab 显式关联、同步 ARIA 状态及保留表单/滚动状态。
hidden 属性为什么比 display: none 更适合多面板切换
因为 hidden 是语义化控制，浏览器会真正“停用”元素：内部 <video> 暂停、<iframe> 卸载、表单控件失焦、读屏器自动跳过；而 display: none 只是视觉隐藏，DOM 仍在运行，容易导致 Safari 下视频持续加载、切回时焦点丢失、动画中断等问题。
只需一行 CSS 就能统一接管样式：
[hidden] { display: none; }之后所有显隐逻辑都交给 JS 控制 element.hidden = true/false，无需操心样式冲突。
-
hidden支持原生可访问性，不用手动加aria-hidden="true" - IE 不支持
hidden，如需兼容，回退到display: none+ 手动管理tabindex和媒体状态 - 别混用：
hidden和style.display同时设置会导致行为不可预测
如何用 data-tab 关联按钮与面板避免 DOM 错位
靠 ID 或兄弟节点索引（如 nextElementSibling）绑定 tab 按钮和内容区，在组件复用、动态插入或 SSR 场景下极易出错。用 data-tab 显式映射才是健壮方案。
按钮写：<button type="button" data-tab="dashboard">仪表盘</button>
对应面板写：<div id="panel-dashboard" hidden role="tabpanel" aria-labelledby="tab-dashboard"></div>
立即学习“前端免费学习笔记（深入）”；
- JS 切换时只操作：
document.querySelector(`#panel-${tab}`).hidden = false - 首次加载必须手动移除默认面板的
hidden，否则白屏——这是上线前最常漏掉的一步 - 不要用
aria-controls的值去拼接 ID，它只是提示作用；真实控制仍靠data-tab+id匹配
键盘导航和读屏器支持必须同步三组状态
没加 ARIA 的 tab 列表，对键盘用户就是一堆不可聚焦、不可识别的 <button>。不能只改 hidden，必须同步：
- 外层容器加
role="tablist" - 每个按钮加
role="tab"、aria-controls="panel-dashboard"、激活时tabindex="0"，非激活时tabindex="-1" - 对应面板加
role="tabpanel"、aria-labelledby指回按钮、激活时aria-hidden="false"
左右方向键切换需 JS 补全——原生 <button> 支持空格/回车，但方向键是真实项目里最容易漏掉的一环。
切换时如何保留表单数据和滚动位置
标签页切换本质是显隐控制，不是销毁重建。只要不调用 innerHTML = '' 或移除元素，输入框的 value、checked、scrollTop 都会保留。
- 别在切换时重渲染整个 panel，只改
hidden属性 - 如果用了 Vue/React，确保没用
v-if或带key的条件渲染，改用v-show或style={{ display }} - 需要跨切换保留滚动位置？给内容区加
overflow-y: auto并监听scroll事件存取scrollTop——仅当真有必要才加，多数场景不需要
hidden 属性的“停用”特性是双刃剑：它让媒体暂停、iframe 卸载，但也意味着切回来时要重新加载资源。如果某个 tab 里有 heavy 的 <iframe> 或长列表，切走再切回会触发重新加载——这不是 bug，是设计使然。
