核心原理是利用 radio 的 :checked 伪类配合相邻兄弟选择器（~ 或 +）控制面板显隐，需同父级、input 在面板前，支持语义化与无障碍；动画须避开 display，改用 opacity/transform 等可过渡属性，并补全 ARIA 属性确保可访问性。
用 input[type="radio"] 控制 Tab 面板显隐的原理
核心是利用单选框（input[type="radio"]）的 :checked 伪类 + 相邻兄弟选择器（~ 或 +）联动控制对应面板的显示。浏览器原生支持，无需 JS，且能保留表单语义和键盘可访问性（Tab 键切换、空格键选中）。
关键约束：所有 input 和对应 div.panel 必须在同一个父容器内，且 input 必须出现在目标面板之前（否则无法用 ~ 选择）。
常见错误现象：display: none 的面板仍占文档流、点击无响应、焦点丢失、移动端点透（iOS Safari 中 label 点击失效）。
实操建议：
- 给每个
input设置唯一name（如name="tab-group"），确保单选互斥 - 用
label[for="xxx"]关联input，避免仅靠视觉位置绑定 - 面板默认设为
display: none，仅当对应input:checked ~ .panel时设为display: block（或flex） - 加
position: absolute或clip-path可避免隐藏面板影响布局高度（尤其内容高度不一时）
:checked ~ .panel 选择器的兼容性与写法陷阱
这个组合依赖 DOM 顺序和层级关系，不是所有结构都适用。例如，若面板被包裹在额外 div 中，~ 就无法跨层命中；若 input 在面板之后，则完全失效。
使用场景：适合「标签栏 + 面板」扁平结构，比如文档页签、产品特性切换、FAQ 折叠区。
实操建议：
- 结构必须为：
input→label→.panel（同级，且input最前） - 不要嵌套
.panel：禁止写成input ~ .wrapper > .panel，CSS 不支持后代穿透 - IE11 及以下不支持
:checked ~，需用+:checked + .panel配合相邻标签（但限制更严） - 用
opacity: 0; pointer-events: none;替代display: none可避免重排，但需注意可访问性（ARIA-hidden 要同步更新）
让 Tab 切换有过渡动画却不出错
CSS 过渡不能直接作用于 display，所以不能写 transition: display 0.3s——它会被忽略。必须改用 max-height、opacity、transform 或 clip-path 等可过渡属性。
性能影响：用 transform 或 opacity 触发 GPU 加速，比 height 更流畅；但 max-height 需预设足够大的值（如 max-height: 500px），否则收起时会“抽搐”。
实操建议：
- 推荐方案：用
opacity+pointer-events+transform: translateY()组合，兼顾动画与语义 - 避免用
height过渡：需 JS 测量真实高度，违背“零 JS”前提 - 给所有面板统一设置
transition: opacity 0.25s ease, transform 0.25s ease，再单独控制opacity: 0 / 1和transform: translateY(-10px) / none - 注意：
visibility: hidden不触发重排，但不可过渡；要动画就得用opacity
移动端适配与可访问性补漏
iOS Safari 对 label 点击区域识别较弱，常出现点不中、需要双击；同时屏幕阅读器可能无法正确播报当前激活的 Tab 标题。
容易被忽略的地方：没有设置 role="tablist"、role="tab"、role="tabpanel"，键盘用户无法用方向键切换，也无法通过 Ctrl+Shift+Down 进入面板。
实操建议：
- 给外层容器加
role="tablist"，每个label加role="tab" aria-controls="panel-id"，每个.panel加role="tabpanel" id="panel-id" aria-labelledby="tab-id" - 用
tabindex="-1"确保面板可聚焦（尤其配合键盘导航时） - 为防 iOS 点透，给
label加cursor: pointer和-webkit-tap-highlight-color: transparent - 禁用
user-select: none在标签上——会影响 VoiceOver 选中逻辑
实际项目里最常卡住的不是写法，而是 DOM 顺序写错、aria- 属性 ID 对不上、或者忘了给 input 设 id 导致 label[for] 失效。这些细节一漏，整个切换就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
