hidden属性是最安全的标签切换方案，它语义明确、自动暂停video、卸载iframe、重置焦点，比display:none更符合DOM生命周期管理要求。
用 hidden 属性或 display: none 控制显隐是最直接的起点，但选错方式会导致视频暂停、表单失焦、无障碍失效——不是功能没做出来，而是 DOM 生命周期没管住。
怎么用 hidden 属性安全切换面板
HTML5 的 hidden 是语义化开关，浏览器会自动暂停内部 、释放 资源、重置焦点逻辑，比纯 CSS 更可靠。
- 每个面板加
id="panel-home"和hidden（默认隐藏），首次加载时必须手动移除默认面板的hidden，否则白屏 - 标签按钮统一用
，避免意外触发表单提交 - 用
data-tab="home"关联按钮和面板，不依赖 DOM 顺序或 ID，方便复用多个 tab 区域 - JS 切换只需两步：
document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true)，再设目标面板document.querySelector('#panel-' + tab).hidden = false - IE 不支持
hidden，需回退到style.display = 'none'并手动管理tabindex和媒体状态
为什么别直接用 display: none 切换
display: none 让元素彻底脱离渲染流，看似省资源，但副作用明确：它不触发媒体暂停（Safari 下 可能继续缓冲）、不释放 iframe、不重置表单焦点——这不是 bug，是规范行为。
- 含
的面板切走再切回，焦点丢失、滚动位置归零、输入值可能被清空 - 如果内容轻量（纯文本+静态图），
display切换没问题；若含动态资源，优先改用hidden或visibility: hidden + position: absolute - 用 class 控制显隐（如
.tab-pane[aria-hidden="true"] { display: none; }）比直接操作style.display更易维护动画和主题切换
如何确保键盘用户和屏幕阅读器可用
只靠鼠标点选的 tab 切换，在无障碍场景下基本不可用。Tab 键进不到页签、方向键切不了页，是常见疏漏。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 外层容器加
role="tablist"，每个按钮加role="tab"、tabindex="0"（当前激活项设tabindex="-1"） - 面板加
role="tabpanel"，并通过aria-labelledby指向对应按钮的id - 监听
keydown事件，支持ArrowLeft/ArrowRight切换，按Enter或Space激活 - 切换时同步更新
aria-selected和aria-hidden，不能只改样式
要不要用纯 CSS 方案（比如 :target 或 radio）
纯 CSS 方案适合静态内容、无需 JS 的简单场景，但有硬限制：无法监听切换事件、不支持过渡动画（:target）、结构强耦合（radio 必须同级兄弟）、移动端 hover 失效。
-
:target方案 URL 可分享，但高亮页签得靠 JS 补充，且opacity过渡在:target下无效 -
radio方案可加动画、支持默认选中，但label必须紧跟对应input，内容区要用~兄弟选择器定位，DOM 稍一变动就失效 - 两者都不满足 WCAG 键盘导航要求，
role="tab"和aria-controls无法通过纯 CSS 激活
真正麻烦的不是“怎么让内容消失”，而是“消失时它还在不在内存里、焦点在哪、滚动条停在哪、屏幕阅读器知不知道”。这些细节不处理，tab 切换就只是个视觉开关，不是可用组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
