应使用 data-tab 而非 id 关联标签与面板，避免复用冲突；通过 data-tab 和 data-tab-panel 语义化匹配，配合 querySelectorAll 定位；切换时仅操作 class 和 ARIA 属性，禁用 style.display；需处理 DOM 加载、事件委托、键盘导航、焦点管理及移动端点击延迟。
用 data-tab 而不是 id 关联标签和面板
直接用 getElementById 绑定 tab 和内容，会导致组件无法复用——页面里多个 tabs 时 id 冲突。实际项目中更稳妥的做法是用 data-tab 建立语义化映射。
每个按钮加 data-tab="products"，对应面板加 data-tab-panel="products"，JS 用 querySelectorAll('[data-tab-panel="' + target + '"]') 定位。这样同一份 HTML 模板可多次插入，互不干扰。
- 避免大小写或空格错误：
data-tab="Products "（尾部空格）和data-tab-panel="products"不匹配，切换会失效 - 别在面板上用
id同时又用data-tab-panel——二者选其一，混用易导致逻辑分支混乱 - 如果内容区需要动态渲染（比如从 API 加载），
data-tab-panel比依赖 DOM 顺序的nth-child更可靠
切换时只操作 class 和 ARIA 属性，不动 style.display
直接写 panel.style.display = 'block' 看似简单，但会破坏主题切换、动画控制和可访问性。正确做法是统一用 CSS 类控制显隐，并同步更新 ARIA 状态。
推荐 CSS 规则：.tab-pane[aria-hidden="true"] { display: none; }，JS 只负责设 panel.setAttribute('aria-hidden', 'true') 和 button.setAttribute('aria-selected', 'false')。
立即学习“前端免费学习笔记（深入）”；
-
display: none会让内部iframe暂停、video中断、表单输入丢失——若面板含交互元素，改用visibility: hidden+position: absolute占位 - 别漏掉
tabindex="0"：面板需可聚焦，尤其当首次切换后要自动 focus 到内部输入框时 - 键盘用户按 Tab 键时，焦点应落在当前激活的
button[role="tab"]上，而不是跳过整个 tablist
事件绑定必须处理 DOM 加载和动态插入
脚本放在 <head> 里直接执行，querySelectorAll 会返回空列表——DOM 还没解析完。更麻烦的是，如果 tab 按钮由 JS 异步渲染（比如 Vue 的 v-for 或 fetch 后插入），静态遍历会漏掉新节点。
两种方案：一是包在 document.addEventListener('DOMContentLoaded', ...)；二是用事件委托，监听容器而非单个按钮。
- 事件委托写法：
tabsContainer.addEventListener('click', e => { if (e.target.matches('[data-tab]')) { handleTabClick(e.target); } }); - 移动端点击有 300ms 延迟，可能触发两次 click——在 handler 开头加
e.preventDefault()，并确保按钮是<button type="button">，不是<a> - 如果用框架（React/Vue），别在组件挂载后反复调用
addEventListener，容易重复绑定——用 ref 或生命周期清理
键盘导航支持不能只靠 click 事件
只监听 click，键盘用户按 Tab 键能进入 tablist，但按 ←→/Home/End 键切不了标签——这是常见可访问性断点。
必须监听 keydown，对方向键做焦点迁移，并保持 aria-selected 同步更新。
- ←/→ 键：移动焦点到相邻 tab 按钮，同时调用
.focus()并更新aria-selected - Home/End 键：跳转到第一个/最后一个 tab，同样要手动
.focus() - 不要用
autofocus：它只在页面加载生效，切换 tab 时不触发 - 屏幕阅读器读不出“当前第几个标签”，是因为漏了
aria-posinset和aria-setsize——这两个属性得手动生成
<input>，焦点不该卡在 tab 按钮上，而该落到那个输入框——这一步必须手动 input.focus()，浏览器不会自动帮你做。 
