正确做法是用 data-tab 与 id 关联标签和面板，统一用 .active 控制显隐与样式，同步处理 aria-hidden、aria-selected 和 tabindex，确保结构、JS 状态、语义属性三者一致。
data-tab 和 class 配合才能绑定不同样式
标签页切换时样式不生效，八成是没把「激活态」和「内容关联」这两件事用 class 和 dataset 绑牢。单纯靠 CSS 选择器（比如 .tab:nth-child(2)）硬写样式，换顺序就崩，改结构就错。
正确做法是：每个标签按钮带 data-tab="panel-1"，对应面板加 id="panel-1"；再统一用 .active 控制视觉状态——所有样式逻辑都围绕这个 class 展开，不依赖位置、不耦合 DOM 深度。
- 标签按钮默认无背景，加
.active后变深色+加边框 - 内容面板默认
display: none，加.active后设为display: block（或flex） - 不要用
:hover代替.active，那只是悬停，不是当前选中态
CSS 里 display: none 和 visibility: hidden 的样式绑定差异
你写的样式能不能“跟着内容一起消失”，取决于你用的是 display 还是 visibility。这直接影响布局、资源加载、表单状态，不是纯视觉问题。
比如你给一个含 <iframe></iframe> 的面板加 display: none，iframe 就会暂停加载；但加 visibility: hidden，它还在后台跑，还占位，布局可能塌陷或错位。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 轻量静态内容（文字、图片）→ 用
display: none+.active { display: block; } - 含 iframe/video/input 的面板 → 改用
visibility: hidden+position: absolute避免占位，同时加.active { visibility: visible; position: static; } - 无论哪种，都要同步控制
aria-hidden="true/false"，否则屏幕阅读器读不到当前面板
JavaScript 切换时 class 同步失败的常见原因
点了标签，内容没出来，或者多个面板同时显示——大概率是 JS 没清干净旧的 .active，或者没正确拿到目标面板 ID。
关键检查点：document.querySelector('[data-tab="' + tabId + '"]') 要能精准命中面板；tabBtn.dataset.tab 必须存在且非空；切换前必须先执行 document.querySelectorAll('.tab, .tab-pane').forEach(el => el.classList.remove('active'))。
- 漏掉清空旧
.active→ 多个标签同时高亮，多个面板同时显示 -
tabId是空字符串或 undefined →querySelector返回 null，后续.classList.add('active')报错Cannot read property 'classList' of null - 用
getElementsByClassName替代querySelectorAll→ 返回 HTMLCollection，不支持forEach，得转数组或用for循环
无障碍（a11y）样式绑定常被忽略的三处
只让眼睛看到“高亮”远远不够。键盘用户按 Tab 键进不到标签、方向键切不了页、屏幕阅读器念不出当前页签名——这些都不是“功能没做对”，而是样式绑定没覆盖语义层。
样式本身要响应 aria-selected="true" 和 tabindex="0"，不能只盯 .active。
- 页签元素必须有
role="tab"，激活时加aria-selected="true"，未激活为"false" - 面板元素必须有
role="tabpanel"，并用aria-labelledby指向对应页签的id - CSS 中写
[aria-selected="true"] { background: #007bff; }，比只写.active更健壮，尤其在 SSR 或服务端渲染场景下
