纯html+css可实现tab切换但不实用，实际项目应使用js控制，需正确设置aria属性、处理dom加载时机、键盘导航及框架集成细节。
HTML 标签页不用 JS 也能做，但别真这么干
纯 HTML + CSS 能实现基础 tab 切换（靠 <input type="radio"> + :checked + 邻居选择器），但实际项目里几乎没人用——它没法响应 URL hash、不支持键盘操作、无法动态增删面板、SEO 友好性也受限。如果你只是想快速预览效果或写个静态文档，可以试试；但只要涉及用户交互或后续维护，直接上 JS 控制更稳。
用 JavaScript 控制 tab 切换的最小可行结构
核心是三部分：tab 按钮列表、内容容器、绑定逻辑。关键是让按钮和对应内容通过 data-tab 或 id/aria-controls 明确关联，而不是靠 DOM 位置硬匹配。
常见错误现象：
– 点击后内容不切换，因为 data-tab 值大小写不一致或含空格
– 多个 tab 同时激活，因为没清空其他按钮的 aria-selected="true"
– 屏幕阅读器读不出当前状态，因为漏了 aria-hidden 和 tabindex
- 每个 tab 按钮加
role="tab"、aria-controls="panel-id"、tabindex="0" - 每个内容区加
role="tabpanel"、id="panel-id"、aria-labelledby="tab-id" - 默认激活项要手动设
aria-selected="true"和对应 panel 的aria-hidden="false" - 切换时只改
aria-selected和aria-hidden，别用display: none隐藏（影响可访问性）
用 querySelectorAll 绑定事件时容易漏掉的兼容点
很多人写 document.querySelectorAll('.tab-btn').forEach(...) 就完事，但实际运行中常出问题：
立即学习“前端免费学习笔记（深入）”；
- DOM 还没加载完就执行脚本 → 把代码放
