用原生HTML+CSS+JS实现多标签页切换，关键是以hidden属性或display:none控制显隐，通过data-tab与aria-controls精准关联按钮和面板，确保表单数据、滚动位置、媒体状态不丢失，兼顾可访问性。
怎么用原生 HTML + CSS + JavaScript 实现多标签页切换
不用框架也能做，关键是把「标签按钮」和「内容面板」用 data-tab 或 id/aria-controls 明确关联起来。核心不是“怎么写漂亮”，而是“怎么让点击一个按钮只显示对应内容，其他全隐藏”。
常见错误是直接用 display: none 硬切，结果表单输入框失焦、视频暂停、动画中断——这些不是 bug，是没考虑 DOM 生命周期。
- 标签按钮建议用
<button type="button"></button>，避免触发表单提交 - 每个标签页内容区加
role="tabpanel"，对应按钮加aria-controls="panel-id"，可访问性基础就稳了 - 不要用
visibility: hidden隐藏内容区，它仍占布局且无法聚焦；优先用display: none或hidden属性
为什么 hidden 属性比 display: none 更推荐
hidden 是 HTML5 原生语义属性，浏览器会自动处理它对焦点、动画、媒体播放的影响。比如一个含 <video></video> 的 tab 被设为 hidden，视频会暂停；而纯 CSS 的 display: none 不保证这点。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
hidden支持 JS 动态控制：element.hidden = true或element.setAttribute('hidden', '') - 它天然兼容屏幕阅读器，无需额外
aria-hidden - 注意：IE 不支持
hidden，如需兼容 IE，回退到display: none+ 手动管理tabindex和媒体状态
如何避免切换时丢失表单数据或滚动位置
标签页切换本质是显隐控制，不是销毁重建。只要不调用 innerHTML = '' 或移除元素，输入框的 value、checked、scrollTop 都会保留。
立即学习“前端免费学习笔记（深入）”；
- 别在切换时重渲染整个 panel，只改
hidden或类名 - 如果用了 Vue/React，确保组件没有
v-if或key导致强制卸载；改用v-show或style={{ display }} - 需要保持滚动位置？给内容区加
overflow-y: auto并监听scroll事件存取scrollTop（仅当必须跨切换保留时才加）
一个最小可行的 tab 切换代码片段
<div class="tabs">
<button type="button" data-tab="home" aria-controls="panel-home" aria-selected="true">首页</button>
<button type="button" data-tab="about" aria-controls="panel-about" aria-selected="false">关于</button>
</div>
<div id="panel-home" role="tabpanel" tabindex="0">这里是首页内容</div>
<div id="panel-about" role="tabpanel" tabindex="0" hidden>这里是关于内容</div>
<script>
document.querySelectorAll('[data-tab]').forEach(btn => {
btn.addEventListener('click', () => {
const tab = btn.dataset.tab;
// 隐藏所有 panel
document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true);
// 显示目标 panel
document.getElementById(`panel-${tab}`).hidden = false;
// 同步 aria-selected
document.querySelectorAll('[data-tab]').forEach(b =>
b.setAttribute('aria-selected', b.dataset.tab === tab)
);
});
});
</script>
这个版本没用任何库，不依赖 CSS 框架，能跑通基本交互和可访问性。复杂点在于状态同步——比如 URL hash 变化、浏览器前进后退、键盘 Tab 导航支持，这些得额外补逻辑，不是 tab 切换本身必需的。
