hidden 属性是最稳妥的按需切换方式，它隐藏元素的同时暂停 video/audio/iframe 资源加载、保持可访问性与焦点管理；display: none 仅隐藏渲染但不释放资源，易导致带宽浪费、焦点丢失和 SSR 不一致。
直接用 hidden 属性控制显隐是最稳妥的按需切换方式，它不只是隐藏元素，还会暂停内部 、、 的资源加载和播放，同时自动处理焦点与可访问性状态——这点 display: none 做不到。
为什么别用 display: none 切换 Tab 面板
display: none 只是让浏览器“不渲染”，但元素仍在 DOM 中、仍参与脚本执行、仍可能缓冲视频或保持 iframe 连接（尤其 Safari 下 会继续加载）。含 的面板切走再切回时，焦点丢失、滚动位置归零，表单状态也可能意外保留。
-
display: none不触发媒体暂停，可能持续消耗带宽 -
即使不可见，仍会发起请求并执行 JS - 用 Vue/React 时，
v-show等价于display切换，而v-if才真正销毁实例——这说明显示控制和资源释放本应分离
用 hidden + data-tab 实现最小可行切换
核心逻辑就两步：点击按钮 → 找到目标面板 → 设 hidden = false；其余面板统一设 hidden = true。不需要 ID 绑定，靠 data-tab 映射更安全、可复用。
- 每个按钮写
- 对应面板写 ...
- 首次加载必须手动移除默认面板的
hidden，否则页面空白——这是新手最常漏的一步 - JS 中用
document.querySelector(查找，查不到时跳过，避免`#panel-${tab}`)Cannot set property 'hidden' of null
怎么支持键盘导航和 SSR 一致性
Tab 切换不是纯视觉效果，要满足基础可访问性：aria-controls 指向面板 ID，aria-selected 同步按钮激活态，role="tabpanel" 标明内容区语义。服务端渲染（SSR）时，初始激活的面板不能只靠 JS 加 class，必须在 HTML 中就去掉 hidden ——否则首屏白屏或闪动。
- 按钮加
aria-controls="panel-home"和aria-selected="true" - 面板加
id="panel-home"和role="tabpanel"，首次加载时该面板不带hidden - 用
keydown监听ArrowLeft/ArrowRight，模拟原生 tablist 行为 - 不要依赖
tabindex手动管理焦点顺序，优先用语义化结构和focus()显式聚焦面板
真正难的不是“怎么切”，而是“切完之后资源是否停了、焦点是否对了、屏幕阅读器是否读对了”。hidden 是浏览器原生支持的开关，比任何 CSS 类或 JS 状态都更接近语义本质——别绕路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
