用 hidden 属性控制标签页显隐最稳妥，它会暂停内部音视频、iframe，自动处理焦点和可访问性；display: none 则需手动补救暂停、焦点、ARIA、滚动等副作用。
用 hidden 属性控制标签页显隐最稳妥，它不只是“看不见”，还会暂停内部 <video></video>、<audio></audio>、<iframe></iframe>，并自动处理焦点和可访问性状态；比纯 CSS 的 display: none 更可靠。
为什么别直接用 display: none 切换标签页
常见错误是写个 document.getElementById('panel').style.display = 'none' 就完事。这会导致：
-
<video></video>不会自动暂停，切走后还在后台加载或播放 - 用户从其他 tab 切回来时，
<input>可能失焦，表单输入值虽保留但体验断裂 - 屏幕阅读器无法感知内容已隐藏，需手动加
aria-hidden="true"补救 - 若面板里有
<iframe src="xxx"></iframe>，display: none不保证 iframe 停止加载（尤其在 Safari 中）
怎么用 hidden 实现基础切换逻辑
核心是靠 data-tab 映射按钮和面板，不依赖 ID 或 DOM 顺序：
- 每个标签按钮写成
<button type="button" data-tab="settings">设置</button> - 对应面板写成
<div id="panel-settings" role="tabpanel" hidden>...</div> - 首次加载时，必须手动移除默认面板的
hidden，否则页面白屏：document.getElementById('panel-home').hidden = false - 切换时 JS 只做两件事：
allPanels.forEach(p => p.hidden = true)，再targetPanel.hidden = false
兼容 IE？回退方案要手动补全关键行为
hidden 在 IE 中完全不支持，若必须兼容，得用 display: none + 手动管理副作用：
立即学习“前端免费学习笔记（深入）”；
- 切换前，遍历所有面板内的
<video></video>、<audio></audio>，调用.pause() - 对
<iframe></iframe>，可临时清空src或设为about:blank，再切回来时恢复 - 用
tabindex="-1"和aria-hidden="true"手动控制可访问性 - 保存并恢复
scrollTop（如果内容区有滚动），display: none会重置滚动位置，而hidden不会
真正难的不是“怎么切”，而是“切完之后里面的东西还 behaving 正常”。hidden 是浏览器原生给的语义契约，省掉大量手动兜底；一旦绕开它，每个动态资源都可能变成一个待填的坑。
