界面与交互 · 内容与数据展示

标签页Tabs

把同一对象的相关内容分组到同一上下文、一次只显示一组的切换组件；当前态、键盘路径、tab/tabpanel 关联、禁用原因与深链都要落在物件上。

订单详情标签页：4 组内容、墨色下划线随切换移动

亲手切标签、用方向键移动焦点、确认收货让售后标签从禁用变为可用，再切到售后提交申请——墨色下划线、面板物件、禁用原因和申请号都长在物件上，不只靠底部说明。

第 0 步：这是「订单 #1024」的标签页详情。点标签或用 ← / → 切换，看墨色下划线移动、面板物件换内容；在详情面板点「确认收货」，售后标签会从禁用变为可用；切到售后选原因再提交申请。

订单 #1024同一对象 · 4 组内容

售后标签禁用：订单未确认收货。在「详情」面板点「确认收货」即可启用。

订单详情运输中

合计 ¥328

对照：当前在「详情」标签——墨色下划线指向活动标签，面板显示订单 #1024 的商品与状态物件。原因：售后标签禁用，因为订单未确认收货；下一步：点详情面板的「确认收货」启用售后，或用 ← / → 在标签间切换。

把刚才在订单上看到的现象命名为六条规则。

一次只显示一组：切标签后面板物件整体换内容——详情、物流、评价、售后不会同时挤在一页里。
当前态用墨色下划线：活动标签下方有一条会随切换移动的墨色下划线，活动文字也更粗；颜色不独撑含义。
键盘左右切换：方向键在标签间移动焦点与选中，Home/End 跳首尾；只有活动标签进入 Tab 序列（roving tabindex）。
tab 与 tabpanel 双向关联：活动 tab 用 aria-selected、aria-controls 指向面板，面板用 aria-labelledby 回指——读屏知道当前显示什么。
禁用标签要给原因：售后在未确认收货时禁用、不可选，旁边写明原因与启用路径，而不是悄悄灰掉。
状态随对象变化：确认收货后，订单状态物件与售后标签的可选性一起改变，因为它们属于同一个订单对象。

从「同一对象要不要分成几组相关内容」判断，而不是看内容多不多。

适合

同一对象的多组相关内容要在同页切换——订单详情、项目概览/评论/设置、成员资料、配置面板；组与组并列、不需要同时对照。

先别用

跨页面的主导航（→ menu）、必须同时对照两组内容（→ 分屏或并排）、只有一组内容（→ 直接展示）、线性流程步骤（→ steps）。

一次到位的检查顺序。

定分组：围绕同一对象切内容，组与组并列、不线性；每组服务于同一身份（同一个订单/项目/成员）。
定当前态：墨色下划线或填充指示活动标签，活动文字更重；颜色只加强，不独撑。
给键盘：方向键切换、Home/End 跳首尾、Tab 进面板；roving tabindex 只让活动标签在 Tab 序列里。
关联 tabpanel：tab 用 aria-selected + aria-controls，面板用 role="tabpanel" + aria-labelledby。
禁用给原因：条件不满足时禁用标签，旁注原因与启用路径；不要静默灰掉，更不要删掉标签。
给深链：当前分组写入 URL hash（如 #aftersales），刷新或分享链接时恢复同一标签。

只改一处关键判断——是否让当前态、禁用原因与面板关联都落在物件上。

正例

订单详情分成 4 组标签；墨色下划线随切换移动；售后禁用并写明「未确认收货」；确认收货后售后启用；方向键可切；tab 与 tabpanel 用 aria 关联。

用户一眼知道在哪、为什么有的不能选、键盘能走完。

反例

4 组内容同时堆在一页要滚到底；当前态只靠品牌色高亮，色弱看不出；售后灰掉但不说原因；键盘到不了标签；面板没有 aria 关联，读屏不知道在显示哪组。

用户找不到自己、猜不出禁用、键盘和读屏都被挡在外面。

订单详情的「售后」标签目前灰着，用户问为什么不能点。最合适的做法是？

术语的技术定义和行为以这些一手或权威资料为准。

和本知识点经常一起出现的概念。