COMPONENT 05 · Navigation & Orientation

标签页

Tabs

也叫Tab ViewTab Control页签NSTabView

在同一页面区域内切换一组彼此并列的内容面板。

Switches between peer content panels without leaving the current context.

ANATOMY & USAGE

结构与使用建议

组成部分

标签列表
标签按钮
内容面板

适合使用

内容组彼此同级且用户一次只需查看一组时。

不建议使用

内容需要同时比较或代表不同页面层级时。

键盘与无障碍

实现 tablist/tab/tabpanel 角色、方向键导航、aria-selected 与焦点管理。

DESCRIBE IT TO AI

这样告诉编程助手

实现标签页（Tabs）：在同一页面区域内切换一组彼此并列的内容面板。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack">
  <div class="row" role="tablist" aria-label="账户设置">
    <button id="profile-tab" role="tab" aria-selected="true" aria-controls="profile" tabindex="0">资料</button>
    <button id="security-tab" role="tab" aria-selected="false" aria-controls="security" tabindex="-1">安全</button>
  </div>
  <div id="profile" role="tabpanel" aria-labelledby="profile-tab">编辑你的公开资料。</div>
  <div id="security" role="tabpanel" aria-labelledby="security-tab" hidden>管理登录与密码。</div>
</section>