radio实现选项卡的核心逻辑是靠name属性绑定一组单选框，用:checked伪类配合~或+选择器控制对应面板显隐；必须同name、设value、label绑定id、radio置于面板前或通过data-tab间接关联，禁用display:none而用visibility+height隐藏。
radio 实现选项卡的核心逻辑是什么
靠 name 属性绑定一组单选框，用 :checked 伪类配合相邻/后续兄弟选择器（~ 或 +）控制对应面板显隐——不依赖 JS，纯 CSS 驱动。
关键点在于：每个 <input type="radio"> 必须有相同 name 值，且紧邻或能被定位到对应 <div class="tab-panel"> 元素。否则样式不会响应切换。
- 必须给所有
radio设置value（哪怕只是占位），否则部分浏览器（如 Safari）可能忽略未选中态 -
radio标签本身要放在对应面板之前，否则~无法向上匹配；若想放后面，得用+配合label换序（见下节） - 默认第一个
radio应加checked属性，否则初始无面板显示
如何让 radio 和面板在 DOM 中物理分离
实际布局常要求标签页头和内容区不在同一层级嵌套位置，比如页头在 <header>、面板在 <main>。这时不能靠 ~ 直接关联，得用 id/for + :checked + 属性选择器间接控制。
做法是：每个 radio 设唯一 id，对应面板设 id；再用 input#tab1:checked ~ .tab-panel[for="tab1"] 这类组合定位——但注意：~ 只能向后找，所以 radio 必须在面板的共同祖先内且位置靠前。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的方式是把所有
radio放进隐藏容器（如<div class="tab-switchers" aria-hidden="true">），再用input[id="tab1"]:checked ~ [data-tab="tab1"]控制面板 - 避免用
display: none隐藏radio，改用position: absolute; clip: rect(0 0 0 0);，否则某些屏幕阅读器会跳过 - 面板建议统一加
tabindex="-1"，配合aria-hidden="true/false"同步可访问性状态
为什么点击 label 能触发 radio 切换但点击 div 不行
因为只有明确绑定的交互元素（label[for]、label 包裹 input、或 input 本身）才触发表单控件状态变更。div 没有原生语义，点击它不会改变 :checked 状态。
- 解决方法：给每个 tab 标题包一层
<label>，并确保for值与对应radio的id一致 - 别写
<label for="nonexistent">，否则点击无效；也别漏掉id——for和id必须精确匹配（区分大小写） - 如果用图标+文字组合标题，把整个
label设为display: flex即可自然对齐，无需额外事件监听
移动端 touch 体验和焦点管理要注意什么
纯 CSS 选项卡在 iOS 上可能遇到点击延迟或 focus 丢失问题，尤其当面板含表单控件时。
- 给
label加-webkit-tap-highlight-color: transparent;消除点击高亮干扰 - 每次切换后，用
document.getElementById("panel-id").focus()手动聚焦面板（需少量 JS，但比全量 JS 实现轻量得多） - 避免在面板里放
autofocus元素——多个面板共存时会导致焦点跳转混乱 - 若支持键盘导航，确保
Tab能顺序进入各label，且Space/Enter可触发选择（浏览器默认支持，不用额外 JS）
真正难的不是写出来，而是让每个面板的 height 动态适配内容又不闪跳，还有 Safari 对 :checked ~ * 的渲染竞态——这些得靠 max-height 过渡或 visibility 配合 opacity 来压平。
