用 data-tab 和 hidden 属性实现标签页切换，首次加载需手动移除默认面板的 hidden；js 仅两行控制显隐，避免 display: none 破坏可访问性；必须配合 aria-hidden、role="tablist" 等 aria 属性确保无障碍支持。
怎么用 hidden 属性做最简标签页切换
不需要框架、不依赖 ID 顺序，靠 data-tab 和 hidden 就能跑通。关键不是“怎么写”，而是“怎么避免白屏”——首次加载时默认面板必须手动移除 hidden，否则页面空着。
- 所有标签按钮用
<button type="button"></button>，防止意外触发表单提交 - 按钮加
data-tab="home"，对应面板用id="panel-home"+hidden - JS 切换逻辑就两行：
document.querySelectorAll('.panel').forEach(p => p.hidden = true)，再设目标p.hidden = false - 不推荐用
display: none控制显隐——它会破坏可访问性（屏幕阅读器跳过），而hidden是语义正确且原生支持的
tab-container 结构里 class 名要不要带 active
带 active 类名是常见做法，但纯属 CSS 控制需要，JS 本身完全不需要它。真正起作用的是 hidden 属性或 ARIA 状态（如 aria-hidden="true"）。
- 如果你用 CSS 做过渡动画（比如 fade in/out），
active类可以配合opacity和transition，但得同步管理 JS 里的类增删 - 如果只用
hidden，CSS 可以直接写[hidden] { display: none; }，更轻量也更可靠 - 混用
hidden和active容易导致状态不一致：比如 JS 忘了删active，但面板已hidden，视觉和 DOM 状态就脱节了
为什么不用 <a href="#tab1"></a> 做标签切换
锚点跳转（href="#tab1"）看起来省事，但它本质是滚动定位，不是内容切换——它不会自动控制其他面板的显隐，也不触发任何事件，纯粹靠浏览器滚动行为。
- 点击后 URL 变成
#tab1，刷新页面会回到该锚点，但面板仍全显示或全隐藏，取决于你有没有额外 JS 补救 - 无法配合 ARIA 属性（如
aria-selected="true"）做可访问性增强 - SEO 和历史记录无意义：搜索引擎不认为这是不同“页面”，也不会索引各 tab 内容为独立资源
- 真要 SEO 友好，得用
<link rel="canonical">或服务端渲染，而不是靠前端锚点
切换时要不要用 aria-hidden 和 tabindex
要。仅靠 hidden 不够——它会让元素从渲染树移除，但某些旧浏览器或辅助技术可能处理不一致；加上 ARIA 才算完整。
- 显示的面板设
aria-hidden="false"，隐藏的设aria-hidden="true" - 隐藏面板上的焦点元素（如按钮、输入框）必须设
tabindex="-1"或移除tabindex="0"，否则键盘用户 Tab 过去会卡在不可见区域 - 当前激活的标签按钮要加
aria-selected="true"，其他为"false"，让屏幕阅读器知道哪一个是选中态 - 别忘了给整个 tab 区域加
role="tablist"，每个按钮加role="tab"，对应面板加role="tabpanel"
这些细节不影响功能，但一旦漏掉，就可能让视障用户完全无法操作你的标签页——不是“最好有”，而是“必须有”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
