按钮点击无反应主因是dom未加载完就执行js，应将script移至/body前或用domcontentloaded监听；须统一用addeventlistener绑定事件、严格匹配data-tab与data-tab-panel值、仅通过aria和class控制显隐、并管理键盘焦点。
按钮点击后没反应，大概率是 DOM 没加载完就执行 JS
脚本放在 里、又没加 defer 或事件监听，querySelectorAll('[data-tab]') 会返回空列表——按钮根本没被找到。这不是代码写错了，是执行时机错了。
必须等 DOM 解析完成再绑定事件：
- 把
<script></script>标签移到前（最简单有效） - 或者用
document.addEventListener('DOMContentLoaded', ...)包一层 - 别信“页面小就无所谓”——哪怕只有两个 tab，异步插入或 SSR 场景下照样崩
用 addEventListener 而不是 onclick 属性
写 <button onclick="switchTab('home')"></button> 看似省事，但会导致逻辑散落在 HTML 里，无法统一处理键盘导航、ARIA 更新、或后续加权限判断。更麻烦的是：一旦按钮是 JS 动态生成的（比如从 API 渲染），这种写法直接失效。
正确做法是集中绑定：
- 用
document.querySelectorAll('[data-tab]')批量获取所有 tab 按钮 - 对每个按钮调用
addEventListener('click', handler) - handler 函数里统一做：移除旧
aria-selected="true"、设新面板aria-hidden="false"、聚焦到面板
data-tab 和 data-tab-panel 必须严格匹配
大小写、空格、引号类型都影响匹配结果。比如按钮写 data-tab="products"，面板却写 data-tab-panel="Products "（末尾带空格），querySelectorAll('[data-tab-panel="products"]') 就找不到目标。
实际开发中建议：
- 全部用小写 + 连字符，如
data-tab="user-settings" - 避免混用
id和data-tab-panel——选一个语义化方案并贯彻到底 - 如果内容区要动态加载（比如点击后 fetch 数据），
data-tab-panel比靠:nth-child(2)定位可靠得多
切换时别碰 style.display，只操作 class 和 ARIA
写 panel.style.display = 'block' 会破坏可访问性、中断内部 <iframe></iframe> 或 <video></video>，也和 CSS 主题切换冲突。浏览器不会报错，但用户会发现：切回去时视频没了、表单输入清空了、暗色模式样式错乱。
应该交给 CSS 控制显隐：
- CSS 写
.tab-pane[aria-hidden="true"] { display: none; } - JS 只负责
panel.setAttribute('aria-hidden', 'true')和btn.setAttribute('aria-selected', 'false') - 需要保留占位（比如防止布局跳动），用
visibility: hidden+position: absolute替代display: none
button[role="tab"] 上，而不是直接跳进内容区。这点不处理，WCAG 就过不了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
