自动切换标签页需用setInterval配合手动中断机制，通过autoSwitchTimer控制启停，监听页面可见性、用户点击及循环取模，并用data-tab语义化匹配面板，hidden属性替代display控制显隐，首次加载必须显式激活默认Tab。
用 setInterval 触发切换，但必须配手动中断机制
自动按顺序切换标签页，本质是定时调用「切换到下一个 Tab」的逻辑，不是简单套个 setInterval 就完事。最常见错误是定时器一直跑，用户点了一下就卡住、切错、甚至叠加多个定时器——页面切后台再回来时，setInterval 还在偷偷执行，导致面板乱跳。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义一个变量
autoSwitchTimer存储定时器 ID，每次启动前先clearInterval(autoSwitchTimer) - 用户点击任意 Tab 时，立即清除定时器；切换完成后，可选是否重启（比如“点击后暂停 5 秒再继续”）
- 页面进入后台（
visibilitychange事件触发document.hidden === true）时，必须clearInterval；切回前台再重置并启动 - 轮播到最后一个 Tab 后，下一次应回到第一个，而不是报错或停住——用取模运算
(currentIndex + 1) % tabCount最稳
data-tab 映射比 DOM 顺序更可靠，尤其要防动态增删
很多代码靠 tabs[i] 和 panes[i] 索引硬匹配，一旦中间删掉一个 Tab，索引全偏移，后续切换全错。用 data-tab 做语义关联，完全不依赖位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个按钮写
data-tab="metrics"，对应面板写id="panel-metrics"（或统一前缀如data-panel="metrics"） - 切换函数接收目标
tabKey字符串，用document.querySelector('[data-panel="' + tabKey + '"]')查面板，比getElementById更灵活（ID 不能含特殊字符，data-属性无此限制） - 动态添加 Tab 时，只要保证新按钮和新面板的
data-tab/data-panel匹配，无需改 JS 切换逻辑
用 hidden 属性控制显隐，比 display: none 更安全
单纯设 style.display = 'none' 不会暂停内部 <video></video>、<audio></audio> 或 <iframe></iframe>，自动切换时可能造成声音重叠、视频卡顿、第三方统计重复触发。而原生 hidden 属性会真正暂停这些行为，还自动处理焦点与可访问性状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有面板初始带
hidden属性：<div id="panel-home" hidden>... <li>激活时用 <code>el.hidden = false，隐藏时用el.hidden = true（不是el.setAttribute('hidden', '')，后者不移除属性值） - 配合 ARIA：激活按钮加
aria-selected="true"，其他设为"false"；面板加role="tabpanel"和aria-labelledby指向对应按钮 ID - 别混用
hidden和display—— CSS 里不要写[hidden] { display: none }，这会让hidden失效（浏览器忽略该样式） - 在 DOM 加载完成后（
DOMContentLoaded），立刻执行一次初始化切换，例如switchToTab('dashboard') - 不要依赖 HTML 中哪个
<div> 恰好写了 <code>class="active"或内联style—— 那只是视觉提示，JS 逻辑必须自己掌控真实状态 - 如果默认 Tab 是动态决定的（比如从 URL 参数读
tab=alerts），确保解析失败时有 fallback，例如switchToTab(urlTab || 'home')
自动切换最难的不是定时器本身，而是状态生命周期管理：什么时候该停、什么时候该续、用户操作和定时动作谁优先——这些边界条件漏一条，上线后就容易出现“切着切着卡死”或“切到一半声音炸出来”。
首次加载必须显式激活，默认面板不能靠 CSS 猜
页面刚打开时，没有任何 Tab 是激活态，如果 JS 没主动触发一次切换，所有面板都 hidden 或 display: none，结果就是白屏。这不是浏览器问题，是逻辑断层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
