直接改CSS类名即可切换标签页样式，JS仅增删tab-item-active和tab-pane-active类；用opacity+visibility+transform实现过渡动画；深色模式需动态适配颜色、边框与阴影；同步更新aria-hidden、tabindex和role确保无障碍。
直接改 CSS 类名就能切换标签页样式，不需要动 HTML 结构或写新 JS —— 关键是把视觉表现和状态逻辑彻底分开。
用 class 控制标签与面板的显隐，别碰 style.display
硬编码 style.display = "none" 会让样式逻辑锁死在 JS 里，后续加过渡、响应式、暗色模式都得反复改脚本。正确做法是定义两个类：tab-item-active 和 tab-pane-active，JS 只负责增删它们。
- 所有
.tab-pane初始设display: none，.tab-pane-active设为display: block（或flex/grid） - 标签按钮用
.tab-item-active控制背景、边框、文字粗细等，避免用内联样式覆盖 - 切换时统一移除所有
.tab-item-active和.tab-pane-active，再给目标元素加上 - 这样改主题时，只改 CSS 文件里的
.tab-item-active颜色和圆角，JS 一行不动
transition 动画必须配合 visibility + opacity + transform
只靠 display 切换没法做动画，因为 display 是离散值（none/block），浏览器不支持过渡。要用渐变效果，得换一套组合：
.tab-pane { opacity: 0; visibility: hidden; transform: translateY(-5px); }.tab-pane-active { opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.25s ease;- 注意：不能只用
opacity，否则隐藏时仍占位；也不能只用visibility，否则没有淡入感 - 如果内容含
iframe或表单，这种方案比display: none更安全——资源不会被销毁，输入焦点也能保留
深色模式下标签样式容易漏掉的三处地方
很多人切了全局 :root 变量，但标签页的交互态颜色常被忽略：
立即学习“前端免费学习笔记（深入）”；
-
.tab-item-active的背景色和文字色要同时适配深/浅背景，别只写#333这种固定值 -
border-bottom在深色背景下如果用#ccc，会变成一条灰线，实际几乎看不见，建议用var(--border-color) - 激活态的
box-shadow如果写死0 2px 4px rgba(0,0,0,0.1)，在深色模式下会发亮突兀，应改为rgba(0,0,0,0.15)或用color-mix(in srgb, currentColor 15%, transparent)动态混合
最麻烦的不是怎么加样式，而是确保每次切换后 aria-hidden、tabindex 和 role="tabpanel" 同步更新——视觉变了，无障碍状态没跟上，键盘用户就卡在第一个标签出不去。
