hidden属性切换最省心，它自动暂停video/iframe加载、处理焦点和屏幕阅读器可访问性，无需写CSS显隐规则或担心动画冲突。
用 hidden 属性切换最省心，不用写 CSS 显隐规则
直接操作 hidden 属性是当前最稳妥的切换方式，它不只是“看不见”，还会暂停内部 <video>、<iframe> 的加载，自动处理焦点和屏幕阅读器可访问性状态。不需要额外写 display: none 或 visibility: hidden 的 CSS 规则，也不用担心动画冲突。
实操要点：
- 所有面板统一加
hidden属性（除默认显示的那个） - 按钮用
<button type="button">，避免意外触发表单提交 - 用
data-tab关联按钮与面板 ID，比如data-tab="settings"→id="panel-settings" - JS 切换只需两行：
document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true)，再设目标p.hidden = false - 首次加载时必须手动移除默认面板的
hidden，否则白屏
display: none 切换要防空值报错和首屏空白
用 style.display = 'none' 或 block 是最直觉的做法，但新手常卡在两个地方：一是没查到目标元素就直接操作 .style.display，结果报 Cannot set property 'display' of null；二是忘了初始显隐设置，导致页面一打开全是空白。
安全写法：
立即学习“前端免费学习笔记（深入）”；
- 先用
const targetId = btn.dataset.target获取 ID，再判断targetId是否存在 - 用
document.getElementById(targetId)查找前，加一层if (!targetEl) return防中断 - 所有内容区初始统一加
style="display: none;"，再 JS 初始化第一个为block - 别依赖 DOM 顺序或索引匹配，
data-target和id必须严格一致（大小写、连字符都不能错）
加过渡动画别只动 opacity，visibility 必须同步
只设 opacity: 0 → 1 看似能淡入，但隐藏时元素仍占布局、可被聚焦、会被读屏器读取——这不是 bug，是 opacity 的设计行为。真正可用的淡入淡出，必须组合 visibility 控制可访问性状态。
推荐写法：
- CSS 中定义：
.tab-pane { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } .tab-pane.active { opacity: 1; visibility: visible; }- 绝对不要对
display做 transition —— 浏览器不支持 - 如果要做滑动效果，用
transform: translateX()+will-change: transform，比opacity更顺
键盘导航和 ARIA 属性不是可选项，是必填项
纯鼠标点击的标签页，在无障碍场景下基本不可用。用户按 Tab 键进不到页签，方向键切不了标签，屏幕阅读器读不出当前状态——这些不是边缘问题，而是合规底线。
最小语义化要求：
- 外层容器加
role="tablist" - 每个按钮加
role="tab"、tabindex="0"，当前激活项设tabindex="-1" - 对应面板加
role="tabpanel"和aria-labelledby="对应按钮ID" - 监听
keydown，支持ArrowLeft/ArrowRight切换 - 切换时同步更新
aria-hidden="true/false"，否则读屏器会误读隐藏内容
最易被忽略的是：哪怕只是三个静态文本标签，只要用了 JS 切换，就必须补全 ARIA 属性和键盘逻辑。否则不是“功能完整”，而是“残缺可用”。
