hidden属性最稳妥，浏览器自动暂停媒体、隔离焦点并处理可访问性；需配CSS[hidden]{display:none}，JS用panel.hidden=true/false控制，IE需回退display:none+手动管理。
用 hidden 属性隐藏内容最稳妥
直接设 display: none 能隐藏，但不会暂停内部 <video>、<iframe> 或释放焦点；hidden 是 HTML 原生语义属性，浏览器会自动处理媒体暂停、焦点隔离和可访问性状态。
实操要点：
-
hidden必须配合 CSS 规则[hidden] { display: none; }才生效（否则部分旧样式可能覆盖） - JS 控制只需
panel.hidden = true或panel.hidden = false，比操作style.display更干净 - IE 不支持
hidden，如需兼容，得回退到display: none+ 手动管理tabindex和aria-hidden - 所有面板初始必须带
hidden属性，否则首次加载时多个内容同时显示
data-tab 关联按钮和面板比 ID 更可靠
靠 id 和 getElementById() 匹配容易因拼写错误或重复 ID 失败；用 data-tab 建立逻辑映射，解耦 DOM 结构与功能绑定。
例如：<button data-tab="settings">设置</button> 对应 <div id="panel-settings" hidden></div>。
立即学习“前端免费学习笔记（深入）”；
JS 中获取目标面板的推荐写法：
- 用
btn.dataset.tab拿值，不是btn.getAttribute('data-tab')（更简洁，自动驼峰转换） - 拼接 ID 时统一前缀，比如
const panelId = 'panel-' + btn.dataset.tab，避免手误 - 查不到对应元素时，加
if (!panel) return防止Cannot set property 'hidden' of null - 不依赖 DOM 顺序，同一页面复用多组 tab 也不会冲突
切换前必须统一隐藏所有面板
新手最常漏的一步：只显目标，不隐其余——结果多个内容块同时可见，布局错乱。
正确逻辑只有两步：
- 遍历所有
role="tabpanel"或带id匹配panel-的元素，全部设p.hidden = true - 再对目标面板设
targetPanel.hidden = false - 不要用
if (p.id === targetId)来判断是否该显，而是先全隐、再单显，逻辑更健壮 - 如果用 class 控制（如
content-active），也要先移除所有同类 class，再添加到目标上
含表单或视频的内容别用 display: none 硬切
display: none 会让 <input> 失焦、清空输入框焦点状态，<video> 暂停且无法恢复播放位置；hidden 属性能保这些状态，但若必须用 display，就得额外补救。
替代方案：
- 轻量内容（纯文本、静态图）→ 直接用
hidden或display: none - 含表单 → 保留 DOM，只用
visibility: hidden+position: absolute移出视口，同时设tabindex="-1"防止键盘聚焦 - 含
<iframe>或<video>→ 优先用hidden；若失效，监听hidden变化手动调iframe.contentWindow?.pause()等 - 永远别在切换时用
innerHTML = ''或remove()销毁重建，否则所有用户输入和滚动位置全丢
真正麻烦的不是怎么切，而是切完之后表单还留不留值、视频还记不记得播到哪、屏幕阅读器还知不知道当前在哪个 tab——这些细节没对齐，hidden 就只是个开关，不是完整方案。
