Tabs 标签页 Tabs web

A single row of labels that switches one shared content region

一排标签，切换同一块共享内容区

also called也叫: tabbed interface, tab list, tab bar标签页界面、标签列表、标签栏
If you called it…如果你管它叫……: “the row of labels that switches the panel below”「那排能切换下面面板的标签」
“sections with an underline under the active one”「当前项底下有条线的切换标签」
“clickable headings for changing views”「点了就能换视图的标题」
“the horizontal switcher above content”「内容上方那个横向切换器」
“browser tab style navigation inside a page”「页面里长得像浏览器标签页的导航」

Weekly activity

1,248

+12% from last week

标本可交互 —— 点点看。Specimen is live — try it.

Anatomy — every part, named解剖 —— 每个部件的名字

1 Tab list标签列表 role="tablist"

“The whole row of view-switching labels” is the tab list.
「那整排用来切换视图的标签」就是标签列表。

Prompt fragmentPrompt 片段
the role="tablist" row containing the peer tab labels as one keyboard-navigation unit

role="tablist" 的一行，装着平级的标签，作为一个键盘导航单元
2 Active-tab indicator活动标签指示器 aria-selected="true"

“The line that moves under the selected label” is the active-tab indicator.
「选中标签下面那条会移动的线」就是活动标签指示器。

Prompt fragmentPrompt 片段
the active-tab indicator under the role="tab" with aria-selected="true", moving smoothly between labels

aria-selected="true" 的 role="tab" 下方的活动标签指示器，在标签间平滑移动
3 Tab panel标签面板 role="tabpanel"

“The shared content area that changes below the labels” is the tab panel.
「标签下面那块会跟着变的内容区」就是标签面板。

Prompt fragmentPrompt 片段
the role="tabpanel" content region linked to its selected tab by aria-labelledby

role="tabpanel" 内容区，通过 aria-labelledby 与选中标签相连

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Build accessible Tabs with a role="tablist", one role="tab" marked aria-selected="true", and a matching role="tabpanel" connected with aria-controls and aria-labelledby. Keep only the active tab at tabindex="0", move between tabs with Left and Right Arrow, and switch the shared panel without navigating away.

构建无障碍的标签页：一个 role="tablist"，其中一个 role="tab" 标记 aria-selected="true"，对应的 role="tabpanel" 用 aria-controls 和 aria-labelledby 互相连接。只有活动标签保持 tabindex="0"，用左右方向键在标签间移动，切换共享面板但不离开页面。

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

Debug my tabs (role=tablist/tab/tabpanel, roving tabindex). Rule out: every tab in the Tab order instead of one roving tabindex with arrow-key movement; panels missing aria-labelledby back-references; the active indicator not moving on resize because its position was measured once; panel state lost on switch because inactive panels unmount when they should hide. The symptom:

调试我的标签页（role=tablist/tab/tabpanel、roving tabindex）。排查：每个标签都进了 Tab 键序，而不是用单一 roving tabindex 加方向键移动；面板缺少 aria-labelledby 反向引用；窗口缩放时活动指示器不动，因为位置只量了一次；切换后面板状态丢失，因为非活动面板被卸载了，本该只是隐藏。症状：

In code代码里叫什么

Framework框架	Symbol符号	Note说明
ARIA	role="tablist"
ARIA	role="tab"
ARIA	role="tabpanel"
Radix	Tabs

Anatomy — every part, named解剖 —— 每个部件的名字

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

In code代码里叫什么

See also相关词条