标签页 Tabs
课程详情需要在课程概览、学习资料和讨论之间切换，但用户仍停留在同一课程。
前端与交互约 10 分钟 · 从真实需求理解
1Tabs 如何切换相关内容？
课程摘要
- 学习目标
- 预计 12 分钟
标签页 负责在同一页面上下文中切换相关内容面板，保留当前标签、面板关系和键盘可达性。
- 先确认用户是在阅读、比较、筛选还是继续操作，再选择对应的内容结构。
2标签页和相近结构，什么时候不能互换？
标签页的判断依据不是外观，而是用户正在阅读、比较、筛选或继续操作的关系。[[Link|link]只在语义边界符合时替代它。
- 先确认用户是在阅读、比较、筛选还是继续操作，再选择对应的内容结构。
3标签页由哪些真实部分组成？
课程摘要
- 学习目标
- 预计 12 分钟
学习资料现在可以读取课件和练习。
组成部分来自真实 DOM：标签栏、当前标签、内容面板、关联关系。标注只帮助定位结构，不复制一套新的内容。
- 先确认用户是在阅读、比较、筛选还是继续操作，再选择对应的内容结构。
4标签页怎样适应不同密度？
常规密度默认标签页
空间收紧紧凑标签页
局部滚动窄屏滚动
区分密度变化和模式切换，不把 Tabs 误当成 Segmented。
- 先确认用户是在阅读、比较、筛选还是继续操作，再选择对应的内容结构。
5标签页放进真实场景后怎样回应？
切换到学习资料
标签页切换到学习资料
当前 panel 替换为资料清单，课程标题和页面上下文保持不变。用户正在阅读同一课程的概览。
Tabs 切换同一上下文中的面板，不承担独立页面导航。
- 先确认用户是在阅读、比较、筛选还是继续操作，再选择对应的内容结构。
6标签页什么时候用、什么时候不用？
课程标题和页面语境保持不变，只换当前内容。
- 先确认用户是在阅读、比较、筛选还是继续操作，再选择对应的内容结构。
7怎样把标签页需求交给 Agent？
请用标签页实现课程详情需要在课程概览、学习资料和讨论之间切换，但用户仍停留在同一课程。，先说明内容关系、可观察结果和窄屏策略；不要用相邻结构替代它，也不要添加没有语义责任的装饰。
8不用背，看看你能不能判断
1 / 3
Tabs 主要切换什么？
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。