展现形式 · 概念

Tabs：同层互斥视图的切换模式

分析 Tabs 适合哪些同层互斥内容，以及自动与手动激活、方向键焦点、移动端溢出、深链接和无 JavaScript 退化要求。

Tabs 用一组标签控制同一位置中的多个同层面板，每次通常显示一个。它表达“这些视图互为替代”，不是普通站点导航，也不应把有先后关系的步骤伪装成标签。

适合与不适合

适合少量、标签简短、层级相同且用户通常只需查看一个视图的内容，例如同一商品的说明维度。不适合重要内容必须全部被发现、标签数量多、标题很长、需要比较多个面板或每个面板都应有独立 URL 的场景。

优点与缺点

优点	缺点
在固定区域切换同层信息，减少纵向长度	未激活内容难以发现
当前选中状态能表达所处视图	用户无法同时查看面板进行比较
适合保持共享上下文	小屏标签容易溢出或变得难点按
可在无需整页跳转时快速切换	深链接、浏览器历史和加载状态较复杂

内容与交互要求

标签应短而能预测面板内容，面板之间必须属于同一层级。面板能无明显延迟显示时，推荐焦点移到标签即激活（自动激活）；若切换需要网络加载或有明显延迟，应改为手动激活，由 Enter 或 Space 确认，避免方向键移动焦点时不断触发等待。需要分享、索引或返回特定视图时，应为状态提供稳定 URL 或改用普通页面导航。

响应式与无障碍

标签列表、标签和面板暴露正确角色、选中状态及关联关系。Tab 进入标签列表时落在当前选中的标签上，其余标签不占用 Tab 顺序；横向标签用左右方向键移动焦点并在两端循环，纵向标签使用上下方向键，Home/End 可作为可选的首尾跳转；再按 Tab 离开标签列表，进入其后的页面内容（通常是当前面板）。小屏不能只靠水平滚动隐藏当前选择，可在保持语义的前提下改为纵向标签或 Accordion。

状态与退化

只有一个面板时直接展示内容。无 JavaScript 时按标题顺序显示全部面板，或提供普通锚点导航。切换失败不能显示空白；异步面板需要独立的加载、错误和重试状态。

发布前检查

面板是否真正同层且互斥？
用户是否需要同时比较它们？
标签在小屏和翻译后是否仍可见？
自动激活是否足够即时？
深链接、返回键和无 JavaScript 时如何工作？