最简方案是用 display: none 切换，但需同步处理初始状态、ID 匹配和空值防护；推荐用 data-tab 属性映射关联按钮与面板，配合 CSS 类控制显隐并做存在性校验。
直接用 display: none 切换最简单，但必须同步处理初始状态、ID 匹配和空值防护，否则首屏白屏或点击无反应。
用 data-tab 关联按钮和面板，别靠 DOM 顺序
硬写 querySelectorAll('div')[0] 或依赖兄弟节点位置，后期加个广告位或改个结构就全崩。用属性映射才是可维护的起点：
- 每个按钮加
data-tab="home"，对应面板加id="panel-home" - JS 里统一用
btn.dataset.tab取值，再拼接选择器#panel-${tab} - 避免用
id直接绑定，因为页面可能复用多个标签页组件，ID 冲突会静默失败
首次加载必须手动激活一个面板
这是新手踩坑率最高的点：所有面板默认 display: none，又没 JS 初始化，结果打开页面一片空白。
- HTML 中给默认面板加
style="display: block"（如<div id="panel-home" style="display: block">） - 或在 JS 加载后立即执行一次切换逻辑，比如
triggerTab('home') - 别指望浏览器自动“猜”哪个该显示——它不会
用 class 控制显隐，别直接操作 style.display
内联样式写死在 JS 里，后续想加淡入动画、适配暗色模式、或者抽离主题，就得翻代码改每一处 style.display = 'block'。
立即学习“前端免费学习笔记（深入）”；
- CSS 里定义
.tab-panel { display: none; }和.tab-panel.active { display: block; } - JS 只负责增删
active类：targetEl.classList.add('active')、others.forEach(el => el.classList.remove('active')) - 这样动画也能交给 CSS：
.tab-panel.active { opacity: 1; transition: opacity 0.2s; }，JS 完全不碰视觉
防报错：检查 dataset 值和元素是否存在
document.getElementById(btn.dataset.tab) 一旦 dataset.tab 是空字符串、拼写错误、或目标 ID 不存在，就会返回 null，接着 null.style.display = 'block' 报错中断脚本。
- 先判断：
if (!targetId) return;、if (!targetEl) { console.warn('No panel found for tab:', targetId); return; } - 不要用
getAttribute('data-tab')，现代浏览器都支持dataset.tab，更简洁且自动处理驼峰转换 - 如果服务端渲染带了内联
style，CSS 类的优先级可能被覆盖，此时用!important不是办法，应统一移除内联样式或提高类选择器权重
真正麻烦的不是切换逻辑本身，而是状态不同步：按钮高亮了，面板没显示；面板显示了，键盘焦点卡在上一个；屏幕阅读器读不出当前页签。这些都不是“能用就行”的问题，而是用户一上手就卡住的关键点。
