直接用display切换最简单，但需同步状态：先隐藏所有面板再显示目标项，用data-tab替代id避免冲突，首次加载须初始化默认项，并通过CSS类而非style控制显隐，同时补全ARIA属性保障无障碍。
直接用 display 切换最简单，但新手常因状态没同步、ID 没对上、或忘了初始化而白屏——不是代码写错，是逻辑断在了“谁该显示”这一步。
用 data-tab 关联标签和内容，别依赖 id
用 id 绑定（比如 button 点击后找 document.getElementById('tab1')）看似直观，但页面里多个标签页组件时会冲突。实际项目中应统一用 data-tab 建立语义映射：
- 每个按钮加
data-tab="home"，对应内容区加data-tab-panel="home" - JS 用
document.querySelectorAll('[data-tab-panel="' + target + '"]')查找，不碰id -
data-tab值要严格一致：大小写、空格、连字符都影响匹配，"Home "≠"home" - 避免混用：
id="tab1"和data-tab-panel="tab1"同时存在，容易在维护时漏改一处
切换前先清空所有面板，再显目标项
常见白屏原因不是 JS 报错，而是“只显不隐”——点了第二个标签，第一个没隐藏，结果两个都 display: block，样式打架；或者压根没设初始状态，所有面板默认 display: none，首屏全空。
- 首次加载必须手动触发一次默认项的显示，或在 JS 中主动设首个面板为可见
- 每次点击都先执行
document.querySelectorAll('[data-tab-panel]').forEach(p => p.style.display = 'none') - 再查出目标面板，设
p.style.display = 'block'（或更推荐用 class 控制） - 如果用
hidden属性，逻辑一样：先全设p.hidden = true，再设目标p.hidden = false
用 CSS 类控制显隐，别硬写 style.display
直接操作 style.display 会让样式逻辑锁死在 JS 里，后续加淡入动画、适配暗色模式、或换布局（flex/grid）都得改脚本。
立即学习“前端免费学习笔记（深入）”；
- 定义统一类名，如
.tab-pane（基础样式）、.tab-pane--active（可见态） - CSS 写
.tab-pane { display: none; }和.tab-pane--active { display: block; } - JS 只负责增删 class：
targetEl.classList.add('tab-pane--active')，其余交由 CSS - 若需过渡效果，把
opacity、max-height或transform放在 class 里，JS 不参与
必须补全 ARIA 属性，否则键盘和屏幕阅读器不可用
纯鼠标点选的标签页，在无障碍场景下等于不存在。Tab 键进不去、方向键切不了、屏幕阅读器读不出当前页签——这不是“锦上添花”，是合规底线。
- 外层容器加
role="tablist" - 每个按钮加
role="tab"、aria-controls="panel-home"（值对应内容区id），当前激活项再加aria-selected="true" - 内容区加
role="tabpanel"、aria-labelledby="tab-home"（指向对应按钮id） - 切换时同步更新这些属性，不能只动样式
真正卡住新手的，往往不是“怎么写”，而是“谁来管状态”——JS 要管哪几件事：映射关系、显隐逻辑、ARIA 同步、焦点管理。少做一件，就可能在某个浏览器、某次刷新、某个键盘用户那里彻底失效。
