不是标签页，仅支持单个折叠面板的展开/收起，缺乏互斥逻辑、ARIA属性（如aria-selected）、焦点管理及键盘方向键导航，无法满足WAI-ARIA标签页模式要求；真标签页须用role="tablist"+role="tab"+role="tabpanel"结构配合JS控制。

原生 details 标签不叫“标签页”，也不支持点击切换标签逻辑；它只是折叠面板，展开/收起由浏览器原生控制，没有 tab 切换行为。真要做标签页（tab），得用 button + aria-selected + 显隐控制，和手风琴是两套语义、两套交互。

为什么 details 不能当标签页用

details 的设计目标是「可选内容的显隐」，不是「互斥视图切换」。它的 open 属性只控制自身状态，不会影响其他 details，也不提供当前激活项标记（如 aria-selected="true"）。标签页需要：当前项高亮、其他项隐藏、键盘方向键切换、屏幕阅读器能读出“第2个标签，已选中”——这些 details 都不支持。

• 点一个 details，其他仍可开着 → 不符合标签页“单视图”预期
• summary 没有 role="tab" 或 aria-controls，辅助技术无法识别为标签
• 无法用 →/← 键在标题间移动，details 只响应空格/回车触发展开
• 没有 tabpanel 对应结构，WAI-ARIA 标签页模式要求严格配对

想实现标签页，该用什么 HTML 结构

必须放弃 details，改用 WAI-ARIA 推荐的 tablist + tab + tabpanel 模式。核心是语义正确、属性同步、JS 控制状态。

• 外层容器加 role="tablist"
• 每个标题用
• 每个内容区用
• 点击时，仅更新当前 button 的 aria-selected="true"，并设对应 tabpanel 的 aria-hidden="false"，其他全部设为 false
• 必须用 JS 同步 tabindex：激活项 tabindex="0"，其余 tabindex="-1"，否则键盘无法聚焦

details 能勉强“模拟”标签页吗？别试

有人试图给多个 details 加 JS 监听 toggle，再手动关掉其他——这只能做出“单开手风琴”，不是标签页。它缺三样关键东西：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 没 role="tab"，屏幕阅读器读作“可展开的组”，不是“标签”
• 没 aria-selected，用户不知道哪个是当前视图
• 没 tabindex 管理，方向键切换完全失效
• 若页面有表单或焦点管理逻辑，这种“伪标签”会破坏整体可访问性流

强行复用 details 做标签页，最终要补的 JS 和 ARIA 比直接写 tablist 还多，且效果不可靠。

手风琴和标签页的边界在哪

真正容易混淆的点在于：两者都涉及“点标题显示内容”。但意图不同——手风琴是「渐进披露信息」，标签页是「切换不同功能/视图」。比如 FAQ 页面用 details 天然合适；而“设置 > 账户 / 安全 / 通知”这种必须用 tablist。

如果你正在调试一个“点了没反应”或“键盘操作失灵”的所谓“标签页”，先检查是否误用了 details ——这是最常被忽略的语义错位。