应使用 data-tab + class 控制标签页切换：按钮设 data-tab="tab1"，面板设 data-tab-panel="tab1"，JS 通过 dataset 获取标识并增删 active 类；CSS 用 opacity、visibility、pointer-events 配合 transition 实现淡入淡出；必须添加 role="tablist"/"tab"/"tabpanel" 及 aria-selected、aria-labelledby 等属性，并支持键盘方向键切换与焦点管理。
直接用 display 切换最省事，但必须同步状态、防空 ID、避免内联样式硬编码——否则首次白屏、点击无反应、动画失效都是高频问题。
怎么用 data-tab + class 控制切换逻辑
别用 onclick="openTab(...)" 写在 HTML 里，也别直接操作 style.display。用 data-tab 建立按钮和面板的映射关系，JS 只负责增删 active 类，CSS 控制显隐和动画。
- 每个按钮加
data-tab="tab1"，对应面板用id="tab1"（或统一用data-tab-panel="tab1"避免 ID 冲突） - JS 中用
btn.dataset.tab拿目标标识，再用document.querySelector('[data-tab-panel="' + target + '"]')查面板 - 切换前先清空所有
.active：document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active')) - 再给目标加
active：targetEl.classList.add('active')
为什么不能只靠 opacity 实现淡入淡出
opacity 单独过渡会导致元素仍占布局、可聚焦、屏幕阅读器误读。必须配合 visibility 和 pointer-events 才算完整。
- CSS 中定义：
.tab-pane { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s, visibility 0.25s; } .tab-pane.active { opacity: 1; visibility: visible; pointer-events: auto; }- 切忌用
display: none配transition——它不触发任何 CSS 过渡 - 如果内容含
iframe或表单，visibility比display更安全，不会中断加载或清空输入值
无障碍支持怎么补全不翻车
没加 role 和 aria- 属性的标签页，键盘用户根本进不去、切不了、读不到——这不是“锦上添花”，是基础可用性门槛。
- 外层容器加
role="tablist"，每个按钮加role="tab"、tabindex="0"，激活项设tabindex="-1" - 面板加
role="tabpanel"、aria-labelledby="对应按钮的 id" - 点击时同步更新
aria-selected="true/false"，否则屏幕阅读器不知道当前在哪页 - 加
keydown监听ArrowLeft/ArrowRight，方向键可切换，不是纯鼠标依赖
真正难的不是写几行 JS 切换，而是让每次切换都同步 DOM 状态、样式类、ARIA 属性、焦点管理、资源生命周期——漏掉任意一环，用户就卡在某一页出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
