Tab Navigation 是一套关于标签页导航的设计与实现规范，适用于设计标签式布局、设置页面、详情视图或带有多种数据视图的仪表盘。其核心思想是：标签页在同一共享上下文下组织相关内容，标签条传达全部可用视图，切换标签仅更换内容面板，而不发生页面导航。只有当所有视图共享标题、主操作或同一主题时才适合使用标签；彼此无关的视图应拆到不同页面。
何时使用标签
适合使用：2–7 个视图共享同一上下文（同一记录、同一设置区块）；用户在会话中频繁切换视图；所有标签都是同等有效的入口；各视图共享页头或一组页面级操作。 不适合使用：超过 7–8 个标签（改用侧边栏或分区导航）；内容是顺序性的（改用步骤条/向导）；某个视图明显是主视图（其余放入次级导航或溢出菜单）；每个“标签”需要不同的页头和布局（拆成独立页面）。
标签类型
下划线/指示器标签：水平条带，活动标签带滑动下划线或底边框，视觉最轻，适合位于内容区内的页面级标签。 盒式/容器标签：每个标签是独立盒子，活动标签与下方面板相连，视觉权重更高，适合屏幕顶部或卡片内的醒目标签组。 胶囊/按钮标签：圆角胶囊，在状态间切换，强调度较低，适合区块内的次级内容切换（非页面级），常用于视图切换（如“列表/网格/地图”）。
结构解剖
标签条（role="tablist"）：固定高度（通常 40–48px），不随页面滚动；页面较长时可考虑吸顶。标签面板（role="tabpanel"）：填充剩余可用高度；内容溢出时滚动的是面板而非标签条。活动指示器：下划线标签为 2–3px 的 --color-primary 底边框；盒式/胶囊标签为填充背景。
状态
活动：主色指示器，标签文字为 --color-text-primary 或主色。非活动：弱化文字（--color-text-secondary），无指示器。悬停：轻微背景变化（--color-grey-50），文字略深。聚焦：可见聚焦环（outline: 2px solid --color-primary; outline-offset: 2px）。禁用：降低不透明度（0.4），cursor: not-allowed，且绝不能是活动标签。资料明确要求绝不禁用活动标签；若内容不可用，应在面板内说明，而不是禁用标签。
标签溢出
当标签条宽于容器时，不要把标签换成多行，这会破坏条带隐喻。三种方案按优先顺序：一是下拉选择回退，测量条带宽度，超出容器时渲染原生 <select>，所有选项一瞥可达；二是可滚动条带，水平滚动并在右缘加渐隐提示溢出，示例代码使用 flex、overflow-x: auto、scrollbar-width: none 及 ::after 渐变；三是“More”溢出菜单，显示能放下的标签，其余折叠进 More ▾ 下拉，并在溢出标签处于活动状态时更新 More 标签文字。无论采用哪种，选中标签只在该标签下加下划线，整条条带下方不要加横线。桌面仪表盘视图较多时，优先用侧边栏导航而非溢出标签。
垂直标签
当有 5 个以上标签且布局带左侧边栏时使用。侧边栏固定宽度（通常 200–240px），标签纵向堆叠；活动标签使用左边框强调（3px solid --color-primary）加轻微背景；主内容区填充剩余宽度。垂直标签允许更长标签而不易溢出，扩展性更好。
键盘导航
遵循 ARIA“roving tabindex”模式：Tab 键将焦点移入标签条（再进入活动面板）；←/→ 在水平条带的标签间移动；↑/↓ 在垂直条带的标签间移动；Home 跳到第一个标签；End 跳到最后一个标签；Enter/Space 激活聚焦的标签。关于自动激活与手动激活：若切换标签会触发网络请求，应使用手动激活（方向键移动焦点、Enter 激活）以避免不必要的请求；若内容已加载或成本低，方向键自动激活可以接受。
ARIA
资料给出完整示例：外层 div 设 role="tablist" 及 aria-label；每个标签为 button，设 role="tab"、id、aria-selected、aria-controls、tabindex；每个面板设 role="tabpanel"、id、aria-labelledby，非活动面板加 hidden。要求：活动标签 aria-selected="true"，其余为 false；活动标签 tabindex="0"，其余为 -1（roving tabindex）；非活动面板用 hidden 属性或 display: none，使屏幕阅读器跳过；当上方标题不足以描述该组时，在 tablist 上加 aria-label。
状态持久化
在页面加载和导航之间记住活动标签：URL 片段或查询参数（如 ?tab=activity）最稳健，支持深链接和浏览器前进/后退；localStorage 适合无需分享的偏好（如首选仪表盘视图）；不要使用 sessionStorage，因为标签页关闭会意外丢失状态。当 URL 含标签参数时，加载后直接跳到该标签，即使它不是第一个。
嵌套标签
避免标签套标签。嵌套会造成作用域困惑：用户编辑“Tab A › 子标签 2”时，无法清晰理解外层标签的含义。若遇到需要嵌套的情况，应重新考虑信息架构：内层标签能否改为次级导航（胶囊、面板内侧边栏）？外层标签能否改为顶级页面导航？主内容区最多保留一层标签。
审查清单
资料提供了完整清单，包括：是否为 2–7 个共享同一主题或上下文的标签；标签条在任何目标视口下是否都不换行；活动标签是否通过颜色和/或指示器清晰区分；悬停与聚焦状态是否满足对比度要求；是否避免禁用标签（改为在面板内说明不可用）；键盘导航是否遵循 roving tabindex；role="tablist"、role="tab"、role="tabpanel" 与 aria-selected 是否设置正确；非活动面板是否从可访问性树隐藏；活动标签是否持久化在 URL 或 localStorage；是否避免嵌套标签；标签溢出是否使用 select、可滚动条带或 More 菜单而非换行；选中标签是否只在该标签下划线、整条条带下方无横线。