原生JS实现tab切换最轻量，核心三步：标记tab按钮与内容区、用data-tab绑定对应关系、批量绑定事件并控制显隐；需正确管理active类、支持hash导航、兼顾touch事件防延迟，且多tab区域时data-tab值须全局唯一。
直接用 document.querySelectorAll 绑定点击事件最轻量
不用引入任何 JS 插件，原生 HTML5 + 简单 JS 就能实现 tab 切换。新手最容易卡在“不知道从哪下手”，其实核心就三步：标记 tab 标签、标记对应内容区、用 JS 控制显隐。
常见错误是给每个 tab 写单独的 onclick 行内函数，结果代码重复、难维护。更合理的方式是统一委托：
- 所有 tab 按钮加相同 class，比如
class="tab-btn" - 所有内容区加相同 class，比如
class="tab-panel"，并用data-tab标记对应关系（如data-tab="home"） - JS 里用
document.querySelectorAll(".tab-btn")批量绑定，点击时读取dataset.tab去显示/隐藏对应面板
Tab 激活状态要用 classList.toggle 而不是手动改 className
很多人写 el.className = "active"，结果把原有 class 全清掉了，按钮样式崩了。正确做法是只操作开关类名：
- 用
el.classList.add("active")激活当前 tab - 用
el.classList.remove("active")清除上一个 tab 的 active 状态 - 内容区同理：
panel.classList.toggle("show", panel.dataset.tab === target)
注意：show 类需在 CSS 中定义为 display: block（或 flex），默认所有 .tab-panel 设为 display: none。
立即学习“前端免费学习笔记（深入）”；
别忽略 hash 变化和浏览器后退支持
用户点 tab 后地址栏没变化，按浏览器后退键就回不去了——这是新手常漏的体验细节。只需两行补救：
- 点击 tab 时调用
history.pushState(null, "", `#${target}`) - 监听
window.onpopstate，在页面加载或前进/后退时根据location.hash自动激活对应 tab
例如：URL 变成 example.com/#profile，JS 读取 location.hash.slice(1) 得到 "profile"，再触发对应切换逻辑。没有插件也能做到“像 SPA 一样”。
移动端 touch 事件要防误触，加 touchstart 替代 click
在 iOS 或安卓上，单纯用 click 会有约 300ms 延迟，且偶尔点不响应。尤其 tab 按钮较小的时候，用户手指一划就可能触发 click 失败。
解决方法很简单：监听 touchstart，并阻止默认行为（避免跟滚动冲突）：
btn.addEventListener("touchstart", function(e) {
e.preventDefault();
switchTab(this.dataset.tab);
});
不需要额外判断设备类型，现代浏览器对 touchstart 兼容良好；如果担心 PC 端失效，可以同时监听 click 和 touchstart，用同一个处理函数。
真正容易被忽略的是：多个 tab 区域共存时，dataset.tab 值必须全局唯一，否则会切错内容区。别图省事全写成 "tab1"。
