data-tab 是最简可行的选项卡标识方式，用于标记面板与按钮并配合 dataset api 定位；需手动控制 display/aria-hidden 实现显隐与可访问性；禁用其存储状态，ie11 建议用 getattribute 兜底。
data-tab 是最简可行的标识方式
用 data-tab 标记每个选项卡面板和对应触发按钮，是最直接、语义清晰且不依赖额外类名的方式。浏览器原生支持 dataset API 读取，无需正则或 class 解析。
- 按钮写成
<button data-tab="profile">个人资料</button> - 面板写成
<div data-tab="profile" class="tab-panel">...</div> - 点击时取
event.target.dataset.tab，再用document.querySelectorAll('[data-tab="' + key + '"]')定位目标元素 - 注意：
dataset会自动把短横线转为驼峰（如data-tab-id→.tabId），但data-tab本身无短横线，直接用.tab
切换时必须显式控制 display 或 aria-hidden
仅靠 data-tab 不会自动隐藏/显示内容。常见错误是只改 class 却忘了 CSS 规则，或漏掉可访问性属性。
- 推荐用
display: none控制显隐，避免影响布局流；若需动画，改用visibility+opacity配合 transition - 必须同步设置
aria-hidden="true/false"和tabindex="-1"（对隐藏面板），否则屏幕阅读器仍会聚焦不可见内容 - 当前激活按钮应加
aria-selected="true"，其他为false
避免用 data-tab 做状态存储
data-tab 是声明式标识，不是状态容器。不要把它当变量反复赋值来“记住当前页”。
- 错误做法：
button.dataset.tab = "active"—— 这破坏了原本的标识语义，后续无法匹配面板 - 正确做法：用独立变量（如
let currentTab = 'profile'）或 class（如tab-btn--active）管理状态，data-tab始终只存原始 ID - 如果需要持久化，用
sessionStorage存 key，而不是往dataset里塞运行时状态
IE11 下 dataset.tab 可能返回 undefined
IE11 支持 dataset，但对自定义属性名解析较严格：若属性含大写字母或数字开头，会失效；data-tab 本身安全，但若误写成 data-Tab 或 data-tab1，IE11 就读不到。
- 兜底方案：用
getAttribute('data-tab')替代dataset.tab，全浏览器兼容 - 不要混用：同一项目中统一用一种读取方式，避免调试时在 Chrome 里正常、IE 里突然空值
data-tab 本身极轻量，但真正难的是状态同步、可访问性和跨浏览器一致性——这些地方一松懈，用户点一下就卡住，或者键盘用户根本切不到下一个 tab。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
