标签页

Tabs

初级通用

标签页（Tabs）是一组并列的内容入口，选中其中一个，就在同一块区域显示对应内容。它帮你把同一对象的几类信息分开，又不用让用户反复跳转页面，比如在项目详情里切换「概览」「成员」「日志」。

你可能会说：「我想把项目详情里的概览、成员和日志放在同一个位置，点不同标题就切换下面的内容。」

动手看看项目详情标签页

品牌官网改版项目详情 · 进行中

概览

成员

日志

本周进展首页视觉稿已确认，正在制作响应式页面。下一步：周五前完成移动端适配。

当前标签

用下方的「当前标签」切换内容；也可以悬停、按住标签，或按 Tab 键聚焦，感受这些即时反馈。选中状态由下方参数控制。

概览被强调时，下方显示项目进展。底部强调线告诉你：当前看的就是这一类信息。

1
一个入口对应一块内容
你可以把标签页理解成一排入口和一块共用的展示区域。点「成员」时，下方显示成员信息；点「日志」时，同一位置换成日志。用户不必离开当前对象，就能查看它的不同侧面。
2
选中状态要看得出来
同一组里通常只有一个标签页处于选中状态，并显示对应内容。我们会用文字、边线或背景区分它，因为用户需要随时知道自己正看哪一部分；只靠颜色区分，可能不够清楚。
3
切换时保留使用线索
如果某个标签页里有筛选条件或未提交的输入，切走再回来会怎样，需要提前想清楚。让 AI 实现时也要说清这些状态是否保留，否则界面虽然能切换，用户却可能丢掉刚才的操作。

标签页和导航菜单都能切换内容，但标签页强调在同一上下文里查看几块并列内容；导航菜单更常用来进入网站或应用的不同页面。它也像分段控件：后者常用来改变同一份数据的视图或筛选方式，例如「列表／网格」；标签页更适合区分「概览／成员」这样各自有内容的板块。

你在做项目详情页，需要展示概览、成员和操作日志。用户通常一次只看其中一类，但会在三类信息间切换。怎么组织更合适？

请在项目详情页实现一组标签页，包含「概览」「成员」「操作日志」。默认显示概览，切换时只展示对应内容，并清楚标出当前选中项。用户切走再回来时，保留成员页已输入的搜索词；同时支持键盘操作。