原生html+css可实现无js的简单tab切换，核心是radio+label+相邻兄弟选择器（~），要求同名name、正确for/id匹配、内容区位于radio后且用:checked ~ #id控制显隐；但存在兼容性、可访问性及功能局限，真实项目推荐js控制class切换，并支持键盘导航与url同步。
怎么用原生 HTML + CSS 实现基础 tab 切换
纯静态 tab 切换不需要 JS 也能做，但仅限于「点击即切换、无状态保持、不支持键盘操作」的简单场景。核心靠 <input type="radio"> 配合 label 和相邻兄弟选择器（~）控制显示隐藏。
关键点：所有 radio 必须同名（如 name="tab"），每个 label 的 for 指向对应 radio 的 id，内容区用 id 匹配并用 :checked ~ #panel-1 这类选择器显隐。
- 必须给每个
input[type="radio"]设置id，且label[for]值严格一致 - 内容区（
<div>）必须放在同一父容器内，且位于对应 radio 之后（否则 <code>~无法选中） - 初始默认选中靠给某个 radio 加
checked属性，别漏写 - CSS 中用
display: none隐藏非当前面板，注意避免用visibility: hidden（仍占布局空间） - tab 按钮和面板需有明确的关联关系，推荐用
data-tab属性（如data-tab="user"）而非顺序索引，避免 DOM 顺序变动导致错位 - 务必在事件处理器里加
event.preventDefault()（如果按钮是<a href="#"></a>） - 首次加载时，应根据 URL hash（如
#settings）或服务器传参自动激活对应 tab，而不是只依赖用户点击 - 别直接操作
style.display，统一用 class 控制，方便复用 CSS 动画（如opacity+transition） - 所有 tab 按钮设
tabindex="0"，非激活态的设tabindex="-1"（或用 JS 动态切） - 监听
keydown，对ArrowLeft/ArrowRight计算下一个有效按钮并.focus() -
Enter或Space触发点击逻辑，不要只绑click——键盘用户不会触发 click - 激活后，焦点应自动移到对应面板（
role="tabpanel"），并设置aria-labelledby指回按钮 - 务必加
role="tablist"、role="tab"、role="tabpanel"和对应aria-controls/aria-selected -
Uncaught TypeError: Cannot read property 'addEventListener' of null：JS 执行时 tab 按钮还没渲染，确保脚本在 DOM 后（<script defer></script>或放
为什么用 JavaScript 实现更可靠
原生 radio 方案在 Safari 旧版、部分屏幕阅读器下行为不一致，且无法响应 URL hash 变化、不支持后退按钮、不能动态增删 tab。真实项目基本都用 JS 控制 class 切换。
最简健壮做法是：监听 tab 按钮的 click，移除所有 .active 类，再给目标按钮和对应面板分别加上。
如何让 tab 支持键盘导航（Tab/Enter/Arrow）
可访问性要求 tab 列表必须能用键盘操作：Tab 进入，左右箭头切换，Enter 或 Space 激活。这需要手动管理 tabindex 和焦点。
常见报错和兼容性坑
实际调试时最常卡在三类问题：DOM 未就绪就执行 JS、CSS 优先级覆盖、移动端点击延迟。
