不是tab切换的合理替代，因其仅为单个可折叠区块，缺乏互斥逻辑、ARIA属性支持、焦点管理、CSS动画钩子及完整键盘导航，仅适用于极简展开收起场景。
HTML 标签页（/）不能替代真正的切换效果（如 tab 切换），它只提供基础的展开/收起语义，缺乏状态管理、动画控制、键盘导航完整性和多面板互斥逻辑。
为什么
不是 tab 切换的合理替代
它本质是单个可折叠区块，不是一组互斥面板。常见误用场景包括：试图用多个
模拟 tab 时，用户能同时打开全部，无法自动关闭其他项；没有
/
等必要 ARIA 属性支持；
属性无法通过 JS 统一受控（原生不触发
事件，需监听
）。
无默认互斥行为：必须手动监听
事件并遍历关闭兄弟节点
无焦点管理：切换后焦点不会自动移到新面板，屏幕阅读器无法感知“当前激活页签”
无 CSS 动画钩子：
是布尔属性，不支持
，需额外用
或
模拟动画（且易出错）
浏览器兼容性差：Safari 15.4+ 才支持
事件，旧版需降级为 click +
切换
什么时候可以凑合用
替代
仅当需求极简：单个内容块需要“点一下展开，再点收起”，不要求视觉 tab 样式、不涉及多面板切换、不需键盘操作（Tab/→/←）、不接入自动化测试或无障碍审计。
文档侧边 FAQ 折叠区
表单中可选的高级配置区域
后台管理页里非核心的调试信息面板
注意：仍建议显式添加
和
提升基础可访问性
真正 tab 切换该怎么做（轻量方案）
用原生 HTML + 少量 JS 控制状态，比硬套
更可控。关键点：用
/
/
结构，JS 只负责
切换和
属性控制，CSS 负责显示/隐藏与过渡。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
每次点击 tab，清除所有
，设目标为
，并同步切换对应
的
状态
用
让 panel 可聚焦，配合
实现键盘切换后焦点落位
避免用
隐藏 panel —— 屏幕阅读器会跳过；用
或
+
更稳妥
复杂交互下，
的“语义正确但能力缺失”反而比手写一个最小可用 tab 更容易埋坑——尤其当设计稿要求带滑动动画、左对齐 tab、或响应式堆叠时，它的 DOM 结构和事件模型就彻底不够用了。
aria-controlsaria-selectedopenchangetoggletoggleopentransitionmax-heightheighttoggleopenrole="region"aria-labelledbyrole="tablist"role="tab"role="tabpanel"aria-selectedhidden
...
...
aria-selected="true"truetabpanelhiddentabindex="0"focus()display: nonehiddenvisibility: hiddenposition: absolute