自动切换标签页需用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' 不会暂停内部 、 或 ，自动切换时可能造成声音重叠、视频卡顿、第三方统计重复触发。而原生 hidden 属性会真正暂停这些行为，还自动处理焦点与可访问性状态。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

实操建议：

• 所有面板初始带 hidden 属性：
• 激活时用 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 失效（浏览器忽略该样式）

首次加载必须显式激活，默认面板不能靠 CSS 猜

页面刚打开时，没有任何 Tab 是激活态，如果 JS 没主动触发一次切换，所有面板都 hidden 或 display: none，结果就是白屏。这不是浏览器问题，是逻辑断层。

实操建议：

• 在 DOM 加载完成后（DOMContentLoaded），立刻执行一次初始化切换，例如 switchToTab('dashboard')
• 不要依赖 HTML 中哪个
  恰好写了 class="active" 或内联 style —— 那只是视觉提示，JS 逻辑必须自己掌控真实状态
• 如果默认 Tab 是动态决定的（比如从 URL 参数读 tab=alerts），确保解析失败时有 fallback，例如 switchToTab(urlTab || 'home')

自动切换最难的不是定时器本身，而是状态生命周期管理：什么时候该停、什么时候该续、用户操作和定时动作谁优先——这些边界条件漏一条，上线后就容易出现“切着切着卡死”或“切到一半声音炸出来”。