原生radio实现选项卡更可靠，因其无需JS监听、不依赖DOM顺序、天然支持键盘导航（Tab+空格），且浏览器原生保证同name下仅一个选中，确保互斥逻辑；关键需统一name、label正确for关联、radio隐藏用clip而非display/visibility。
为什么用 input[type="radio"] 实现选项卡比 JS 更可靠
因为不需要监听点击、不依赖 DOM 加载顺序、天然支持键盘导航（Tab + 空格）、无 JS 降级时仍能保持单选语义。关键是：浏览器原生保证同一 name 下仅一个 radio 被选中，这正是选项卡“互斥切换”的底层逻辑。
常见错误是把 label 写在 input 外面却没设 for 属性，或忘了给所有 radio 设置相同 name —— 这会导致点击后无法取消其他项，看起来像“多选”。
- 所有
input[type="radio"]必须有相同name值（如name="tab"） -
label要么包裹input，要么用for显式关联id - 隐藏 radio 用
position: absolute; clip: rect(0 0 0 0);，别用display: none或visibility: hidden—— 后两者会让 label 失去焦点和可访问性
如何用 :checked 控制内容显示与标签高亮
CSS 的 :checked 伪类是核心开关。它只作用于被选中的 radio，再配合兄弟选择器（~）或相邻兄弟选择器（+），就能联动控制对应内容块的 display 或 opacity。
典型结构是：radio → label（作为 tab 标签）→ .tab-content。由于 radio 和 .tab-content 不是直接兄弟，必须靠中间的 label “搭桥”，所以常用 input:checked ~ .tab-content 配合合理 HTML 顺序。
立即学习“前端免费学习笔记（深入）”；
- 内容区用
display: none初始隐藏，input:checked ~ .tab-content:nth-of-type(n)设为display: block - 标签高亮靠
input:checked + label改变背景或边框 —— 注意这里必须是“相邻兄弟”，所以 radio 和 label 在 HTML 中得紧挨着且 radio 在前 - 避免用
z-index叠层切换，易引发焦点丢失；优先用display或visibility: hidden / visible
响应式断点下如何调整标签布局与切换动效
小屏时横向标签容易换行或溢出，直接加 flex-wrap: wrap 不够——用户可能误点到空白区域触发 radio。更稳妥的是在移动端改用垂直堆叠 + 手风琴式展开，或用 scroll-snap 搭配水平滚动。
动效方面，height 无法从 0 到 auto 做过渡，得改用 max-height 或 opacity + transform。CSS transition 必须写在被切换的元素上（如 .tab-content），而不是 :checked 规则里。
- 移动端（
max-width: 768px）设flex-direction: column，标签宽 100%，内容区默认展开 - 需要淡入淡出：对 .tab-content 设
opacity: 0; transition: opacity 0.2s ease;，再用input:checked ~ .tab-content设opacity: 1 - 避免在
@media里重复写整套:checked规则，只覆盖 display / flex / padding 等布局属性
无障碍与可访问性容易被忽略的三个点
屏幕阅读器不会读取纯视觉的“选中态”，必须靠 aria-selected 和 role="tablist" 显式声明。而且，仅靠 CSS 切换内容，键盘用户按 Tab 键时焦点不会自动跳转到当前内容区 —— 这不是 CSS 能解决的，但至少别让它变得更糟。
- 给每个
label加role="tab"，外层容器加role="tablist"，当前激活项加aria-selected="true" - 不要移除
outline；若美化需用outline: 2px solid #007bff; outline-offset: 2px; - 内容区加
role="tabpanel"和aria-labelledby指向对应 tab 的id，否则 NVDA/JAWS 无法建立关联
真正难的不是让选项卡“看起来能切换”，而是让用户无论用鼠标、触屏还是键盘，都能明确知道当前在哪一栏、内容是否已加载、焦点落在哪里。这些细节藏在属性和语义里，不在样式表中。
