原生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 之后（否则~无法选中） - 初始默认选中靠给某个 radio 加
checked属性，别漏写 - CSS 中用
display: none隐藏非当前面板，注意避免用visibility: hidden（仍占布局空间）
为什么用 JavaScript 实现更可靠
原生 radio 方案在 Safari 旧版、部分屏幕阅读器下行为不一致，且无法响应 URL hash 变化、不支持后退按钮、不能动态增删 tab。真实项目基本都用 JS 控制 class 切换。
最简健壮做法是：监听 tab 按钮的 click，移除所有 .active 类，再给目标按钮和对应面板分别加上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- tab 按钮和面板需有明确的关联关系，推荐用
data-tab属性（如data-tab="user"）而非顺序索引，避免 DOM 顺序变动导致错位 - 务必在事件处理器里加
event.preventDefault()（如果按钮是<a href="#">） - 首次加载时，应根据 URL hash（如
#settings）或服务器传参自动激活对应 tab，而不是只依赖用户点击 - 别直接操作
style.display，统一用 class 控制，方便复用 CSS 动画（如opacity+transition）
如何让 tab 支持键盘导航（Tab/Enter/Arrow）
可访问性要求 tab 列表必须能用键盘操作：Tab 进入，左右箭头切换，Enter 或 Space 激活。这需要手动管理 tabindex 和焦点。
- 所有 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
常见报错和兼容性坑
实际调试时最常卡在三类问题：DOM 未就绪就执行 JS、CSS 优先级覆盖、移动端点击延迟。
-
Uncaught TypeError: Cannot read property 'addEventListener' of null：JS 执行时 tab 按钮还没渲染，确保脚本在 DOM 后（<script defer>或放</body>前） - 切换后内容没显示：检查 CSS 是否被其他规则覆盖（比如父容器
overflow: hidden或面板height: 0），用浏览器 DevTools 看 computed styles - 移动端点一次没反应：可能是
click事件被touchstart阻止，或 FastClick 未启用；更稳妥是监听click并确保按钮不是disabled状态 - IE11 不支持
dataset？用getAttribute('data-tab')替代，或加 polyfill
tab 的复杂度不在视觉动效，而在状态同步、可访问性和边界情况处理。哪怕只有 3 个 tab，也要考虑 URL 同步、服务端首屏直出、SSR hydration 一致性这些点。
