用 data-tab 关联按钮与面板，JS 通过 querySelectorAll 批量操作并显式切换 display，首次加载需手动激活默认项；推荐用 CSS 类替代内联样式以便扩展动画，并补全 role、aria-selected 和 hidden 等可访问性属性。
直接用 display: none + 原生 JS 就能跑通，不需要框架、不依赖 ID 全局唯一性、首次加载也不白屏——前提是把「默认激活」和「状态同步」两步写对。
用 data-tab 关联按钮和面板，别用 id 查找
用 id 绑定（比如 onclick="openTab('tab1')"）看似简单，但页面里多个标签页组件时会冲突；data-tab 是更安全的映射方式，不依赖 DOM 位置，也方便复用。
- 每个按钮加
data-tab="home"，对应面板加data-tab-panel="home" - JS 里统一用
document.querySelectorAll('[data-tab-panel]')批量操作，不用getElementById - 查目标面板时用
document.querySelector(`[data-tab-panel="${tab}"]`)，比拼接 ID 字符串更可靠 - 如果
tab值为空或不存在，先判断再操作，避免Cannot set property 'display' of null
切换逻辑只有两步：清空所有 + 显示目标
很多人写了 JS 却发现点不动，其实是漏了「先隐藏全部」这一步。浏览器不会自动帮你关掉其他面板，必须显式控制。
- 点击时先遍历所有面板，设
p.style.display = 'none' - 再单独给目标面板设
p.style.display = 'block'（或'flex'等所需值） - 首次加载必须手动触发一次默认项显示，比如在脚本末尾加
document.querySelector('[data-tab-panel="home"]').style.display = 'block' - 别用
visibility: hidden替代 —— 它保留占位空间，容易撑乱布局
用 CSS 类代替内联样式，为后续加动画留余地
直接写 style.display 虽快，但之后想加淡入、滑动、响应式隐藏就得改 JS，还容易和外部样式冲突。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 定义两个类：
.tab-panel（基础隐藏）和.tab-panel-active（显示态） - CSS 里写
.tab-panel { display: none; }和.tab-panel-active { display: block; } - JS 只负责
classList.remove('tab-panel-active')和classList.add('tab-panel-active') - 这样加过渡效果只需在 CSS 补一句
transition: opacity 0.2s;，不用碰 JS
别忽略 hidden 属性和可访问性补全
hidden 比 display: none 语义更强，且支持 [hidden] CSS 选择器；但仅靠它不够，屏幕阅读器需要额外属性才能正确播报。
- 面板加
role="tabpanel"，按钮加role="tab"和aria-controls="panel-home" - 首次加载时，给默认按钮设
aria-selected="true"，其他设"false" - 切换时同步更新
aria-selected和hidden属性，否则键盘用户 Tab 进去后按方向键切不了页签 -
hidden不会暂停<video></video>或释放<iframe></iframe>，这点和display: none一致，不是 bug
最易被忽略的是「首次加载默认激活」和「aria-selected 同步」——前者导致白屏，后者让整套切换对键盘和读屏器完全不可用，但这两处都不报错，调试时很难定位。
