跳到主要内容
Termlib

UI 组件 · 导航

标签页

Tabs

也叫：页签、选项卡、标签栏、Tab 切换

一排可点击的标签，点哪个就在下方显示对应的内容面板，用来在同一位置切换几块平级的内容。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在详情页标题下方放一组标签页，包含「基本信息」「订单记录」「操作日志」三个标签。当前标签文字加粗并带 2px 深色下划线，其余为灰色，悬停时变深。点击标签只切换下方面板内容，不刷新页面，并把当前标签记在网址参数里，刷新后仍保持选中。

发给

01判断

你的内容是这样吗？

对照两列，确认标签页是不是你要找的。

符合这些情况，用标签页

  • 同一对象有几块平级信息、用户按需查看其中一块时，例如详情页的基本信息、记录、日志
  • 内容分组在 2~6 个之间，每组内容都较多，全部平铺会让页面过长时
  • 各块内容互相独立，用户不需要同时对照查看时

是这些情况，换成别的

  • 有先后顺序、必须逐步完成的流程，例如注册、下单

    改用步骤条

  • 用户需要同时对照几块内容时，标签页一次只能看一块

  • 分组超过 7 个或名称很长，标签挤不下时

    改用侧边菜单

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把分步表单做成标签页，用户可以跳过前面的步骤直接点最后一步提交

  2. 02

    标签页里再嵌套一层标签页，用户分不清当前在哪一层

  3. 03

    用标签页充当整站主导航，每个标签其实是完全不同的页面

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一排标签头和下方对应的内容面板组成，同一时间只显示一个面板。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一排水平排列的文字标签，下方有一条贯穿的细线
  2. 2其中一个标签带下划线或底色高亮
  3. 3标签下方紧接着一块内容区域

04解释

详细解释

标签页把几块平级的内容叠放在同一个位置，上方一排标签，点击某个标签就显示它对应的面板，其余隐藏。常见于详情页的「基本信息 / 订单记录 / 操作日志」和设置页的分组。选中的标签会有下划线或底色高亮。

标签页里的各块内容互相独立，用户可以按任意顺序查看。步骤条则表示有先后顺序的流程，做完第一步才能进第二步。所以按顺序填写的分步表单应该用步骤条，不要用标签页。

标签以 2~6 个为宜，太多会横向溢出。如果只是在同一份数据的两三种视图之间切换（比如列表和网格），分段控制器更轻量。

开发者信息
术语 ID
component-tabs
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [role="tablist"]
  • .ant-tabs
  • .el-tabs
  • [class*="MuiTabs-root"]
  • .arco-tabs
  • .t-tabs
  • .n-tabs
  • [data-slot="tabs"]
  • .nav-tabs
  • [role="tablist"] [role="tab"]
  • .ant-tabs-tab
  • .el-tabs__item
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • tabs
  • tab-nav
  • tab-list
  • tablist
  • nav-tabs
  • tab-group
  • tabs-nav
  • code-tabs
  • tab-menu
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Tabs
  • TabList
  • TabGroup
  • TabsList
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 重复子项
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30