hidden 属性是控制文章目录标签页切换最稳妥的选择，它能暂停媒体元素、保持焦点与可访问性；display: none 则易致资源泄漏、焦点丢失、锚点失效及屏幕阅读器冗余播报。
hidden 属性是控制文章目录标签页切换最稳妥的选择，它不只是隐藏内容，还会暂停 <video></video>、<audio></audio>、<iframe></iframe>，同时自动处理焦点和可访问性状态。用 display: none 切换容易导致资源未释放、表单焦点丢失、滚动位置重置等问题。
为什么不能只靠 display: none 控制目录标签页
文章目录页签（如「概览」「结构图」「参考文献」）常含嵌入图表、脚本加载的引用列表或带 <input> 的搜索框。设为 display: none 后：
- Chrome/Safari 中
<iframe></iframe>仍可能后台加载，消耗带宽 - 用户切回「参考文献」标签时，
<input>失去焦点，输入光标不会自动恢复 - 若页面有锚点跳转逻辑（如点击「2.3 节」跳到对应段落），
display: none下的元素无法被scrollIntoView()定位 - 屏幕阅读器仍会遍历
display: none元素的子节点（部分版本），造成冗余播报
用 hidden + data-tab 实现干净切换
核心是解耦 DOM 结构与映射关系，不依赖 ID 顺序或 class 名称。示例结构如下：
<button type="button" data-tab="outline">概览</button> <button type="button" data-tab="diagram">结构图</button> <button type="button" data-tab="refs">参考文献</button> <div id="panel-outline" role="tabpanel">...</div> <div id="panel-diagram" role="tabpanel" hidden>...</div> <div id="panel-refs" role="tabpanel" hidden>...</div>
JS 切换只需两步：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 所有
[role="tabpanel"]设p.hidden = true - 目标面板（如
#panel-diagram）设.hidden = false
首次加载必须手动移除默认面板的 hidden，否则白屏；建议在 DOMContentLoaded 后执行一次初始化。
键盘导航和无障碍必须补全
纯鼠标点选的目录标签页对键盘用户不可用。必须加：
- 外层容器加
role="tablist" - 每个按钮加
role="tab"和tabindex="0"（当前激活项设tabindex="-1"） - 面板加
role="tabpanel"和aria-labelledby指向对应按钮的id - 监听
ArrowLeft/ArrowRight切换焦点，避免用户卡死在第一个按钮
漏掉 aria-labelledby 或 tabindex，会导致 NVDA/JAWS 读不出当前在哪一栏，也跳不过去。
复杂点在于：目录页签若含动态渲染内容（比如用 fetch 加载的参考文献列表），不能靠 v-if 或 {show && <panel>}</panel> 销毁重建——这会让已加载的数据和滚动位置全部丢失。应该用 hidden 控制显隐，再配合 IntersectionObserver 延迟加载非活跃面板的内容。
