应使用 data-tab 属性建立按钮与面板的映射关系，通过动态查询 id="panel-{tabValue}" 实现解耦；切换时统一操作 hidden 属性并同步按钮的 aria-selected 和 active 状态。
用 data-tab 建立按钮和面板的映射关系
按钮本身不自带“切换逻辑”，必须靠属性显式告诉 JS “点这个按钮，该显示哪个面板”。data-tab 是最轻量、最语义清晰的方式，比用 id 或 class 更安全，尤其在页面复用多个标签页时不会冲突。
- 每个按钮加
data-tab="home"、data-tab="about"等唯一值 - 对应的内容面板用
id="panel-home"、id="panel-about"（或统一前缀如id="tab-home"） - 不要用
getElementById直接硬编码找元素，而应通过document.querySelector('[id="panel-' + tabValue + '"]')动态匹配
这样改一次属性值，两边就自动对齐，删增标签项也不用同步改 JS 里的字符串。
为什么不能只靠 index 顺序来切换
看似简单：第一个按钮切第一个面板，第二个切第二个……但实际项目里极易出错：
- 标签按钮和面板 DOM 顺序不一致（比如面板被抽成组件、异步加载）
- 中间某个面板被注释掉或
display: none，但 JS 还按索引取，就错位 - 多个标签页区域共存时，
document.querySelectorAll('.tab-button')[i]会跨区域混取
用 data-tab 后，JS 只认“名字”，不依赖位置。哪怕把面板拖到 <footer></footer> 里，只要 id 匹配，照样能切。
立即学习“前端免费学习笔记（深入）”；
切换时该操作 hidden 还是 style.display
优先用 hidden 属性：
- 语义明确：它本就是 HTML5 为“临时隐藏”设计的原生属性
- 支持 CSS 选择器：
[hidden] { display: none !important; }，避免样式污染 - 不影响可访问性：屏幕阅读器会跳过
hidden元素，比display: none更规范 - 性能略好：浏览器对
hidden的渲染优化比内联style更稳定
但注意：首次加载时，默认激活的面板必须手动移除 hidden，否则白屏。别指望 CSS 用 :not([hidden]) 自动兜底——没初始值，所有面板都藏着。
监听点击后，JS 切换逻辑只需两行
核心不是“怎么写复杂”，而是“怎么写得稳”：
- 所有面板统一设
p.hidden = true（用querySelectorAll批量操作） - 目标面板设
targetPanel.hidden = false
不要写成：
if (tab === 'home') { homePanel.hidden = false; aboutPanel.hidden = true; ... }这种硬编码一加新标签就得改 JS，也容易漏掉某一项。动态查、批量关、单个开，才是可持续写法。
容易被忽略的是：按钮自身的状态也要同步更新。光切内容不够，还得给当前按钮加 aria-selected="true" 和 class="active"，否则键盘用户按 Tab 键无法感知焦点在哪，也不利于后续加动画或主题色。
