<details>不是tab切换的合理替代，因其仅为单个可折叠区块，缺乏互斥逻辑、ARIA属性支持、焦点管理、CSS动画钩子及完整键盘导航，仅适用于极简展开收起场景。
HTML 标签页（<details>/<summary>）不能替代真正的切换效果（如 tab 切换），它只提供基础的展开/收起语义，缺乏状态管理、动画控制、键盘导航完整性和多面板互斥逻辑。
为什么 <details> 不是 tab 切换的合理替代
它本质是单个可折叠区块，不是一组互斥面板。常见误用场景包括：试图用多个 <details> 模拟 tab 时，用户能同时打开全部，无法自动关闭其他项；没有 aria-controls/aria-selected 等必要 ARIA 属性支持；open 属性无法通过 JS 统一受控（原生不触发 change 事件，需监听 toggle）。
- 无默认互斥行为：必须手动监听
toggle事件并遍历关闭兄弟节点 - 无焦点管理：切换后焦点不会自动移到新面板，屏幕阅读器无法感知“当前激活页签”
- 无 CSS 动画钩子：
open是布尔属性，不支持transition，需额外用max-height或height模拟动画（且易出错） - 浏览器兼容性差：Safari 15.4+ 才支持
toggle事件，旧版需降级为 click +open切换
什么时候可以凑合用 <details> 替代
仅当需求极简：单个内容块需要“点一下展开，再点收起”，不要求视觉 tab 样式、不涉及多面板切换、不需键盘操作（Tab/→/←）、不接入自动化测试或无障碍审计。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 文档侧边 FAQ 折叠区
- 表单中可选的高级配置区域
- 后台管理页里非核心的调试信息面板
- 注意：仍建议显式添加
role="region"和aria-labelledby提升基础可访问性
真正 tab 切换该怎么做（轻量方案）
用原生 HTML + 少量 JS 控制状态，比硬套 <details> 更可控。关键点：用 role="tablist"/role="tab"/role="tabpanel" 结构，JS 只负责 aria-selected 切换和 hidden 属性控制，CSS 负责显示/隐藏与过渡。
立即学习“前端免费学习笔记（深入）”；
<div role="tablist"> <button role="tab" aria-selected="true" aria-controls="panel-1">设置</button> <button role="tab" aria-selected="false" aria-controls="panel-2">日志</button> </div> <div id="panel-1" role="tabpanel" tabindex="0">...</div> <div id="panel-2" role="tabpanel" tabindex="0" hidden>...</div>
- 每次点击 tab，清除所有
aria-selected="true"，设目标为true，并同步切换对应tabpanel的hidden状态 - 用
tabindex="0"让 panel 可聚焦，配合focus()实现键盘切换后焦点落位 - 避免用
display: none隐藏 panel —— 屏幕阅读器会跳过；用hidden或visibility: hidden+position: absolute更稳妥
复杂交互下，<details> 的“语义正确但能力缺失”反而比手写一个最小可用 tab 更容易埋坑——尤其当设计稿要求带滑动动画、左对齐 tab、或响应式堆叠时，它的 DOM 结构和事件模型就彻底不够用了。
