纯HTML无法实现标签页自动切换，因meta refresh仅整页刷新或跳转，不感知DOM、不维护状态；必须用JavaScript控制aria-selected、hidden等属性，并处理焦点、暂停逻辑等可访问性细节。
纯 HTML 无法实现标签页自动切换，meta http-equiv="refresh" 只能整页刷新或跳转，不是标签页切换；真要定时轮播 tab，必须用 JavaScript 控制显隐或 class 切换。
为什么不能用 meta refresh 做 tab 轮播
meta http-equiv="refresh" 的本质是重载整个页面或跳转 URL，它不感知 DOM 结构，更不会帮你切换 aria-selected、控制 tabpanel 显隐。常见错误是把 content="3; url=#about" 当成“3 秒切到 about 标签”，结果却是页面闪一下、URL 变了、所有状态丢失、键盘焦点重置——这不是轮播，是干扰。
另外，该标签在 Chrome 95+ 已被移出 bfcache，用户点返回可能看到白屏或重复触发，SEO 也明确不鼓励。
用 setInterval + querySelector 切换 tab 最直接
核心逻辑：定时更新按钮的 aria-selected 属性、对应 tabpanel 的 hidden 状态，并同步 tabindex 和 aria-controls 关联。
立即学习“前端免费学习笔记（深入）”；
- 先确保每个 tab 按钮有
data-tab，每个 panel 有对应id，且aria-controls值匹配 - 用
document.querySelectorAll('[role="tab"]')拿到所有 tab 按钮，别用getElementsByClassName返回的类数组 - 每次切换前，先清除所有按钮的
aria-selected="true"和所有 panel 的hidden属性 - 用
(currentIndex + 1) % tabs.length实现循环，避免越界 - 记得在
mouseenter时clearInterval，mouseleave时重启，否则用户来不及看就切走
示例关键片段：
let currentIndex = 0;
const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');
const autoSwitch = setInterval(() => {
tabs.forEach((t, i) => t.setAttribute('aria-selected', i === currentIndex));
panels.forEach((p, i) => {
if (i === currentIndex) p.removeAttribute('hidden');
else p.setAttribute('hidden', '');
});
currentIndex = (currentIndex + 1) % tabs.length;
}, 4000);
用 CSS animation 做“伪自动轮播”不推荐
有人尝试用 @keyframes 配合 :nth-child() 或 :checked 触发 opacity 切换，但这类方案存在硬伤：
- 动画周期固定，无法响应用户点击后重置计时器
- 无法同步更新
aria-selected和tabindex，无障碍完全失效 - 所有 tab 内容必须一次性加载进 DOM，大图或 iframe 会拖慢首屏
- 移动端无 hover，
:hover方案直接不可用；:target无法自动触发，只能靠 URL 锚点手动跳
也就是说，它看起来像轮播，但不是可访问、可交互、可维护的标签页组件。
容易被忽略的细节：focus 管理和 visibilitychange
自动轮播最常被忽视的不是“怎么切”，而是“什么时候不该切”：
- 用户正在输入表单时，
input或textarea获焦，应暂停轮播（监听focusin到表单控件） - 页面被切到后台（
visibilitychange事件），应clearInterval，否则定时器仍在跑，回来时可能索引错乱 - 每个新激活的 tabpanel 必须设
tabindex="0"并调用.focus()，否则键盘用户无法自然进入内容区 - 用
IntersectionObserver监听 tab 容器是否在视口内，不在时停掉定时器，省资源也防误触
这些不是锦上添花，而是让自动轮播从“能动”变成“可用”的分水岭。
