data-tab + css 类控制显隐最灵活，通过语义化 data-tab 属性映射面板 id，配合 .active 类切换显示状态，结合 css 自定义属性、aria 语义和键盘导航实现高度可定制、无障碍的选项卡。
用 data-tab + CSS 类控制显隐最灵活
原生实现里，data-tab 是最可控的关联方式——它不绑定框架、不依赖特定结构，只靠属性值映射 ID，改起来一改全改。你甚至能用 data-tab="user-profile" 这种语义化值，而不是硬编码 "tab1"。
关键点在于：所有面板默认 display: none，只有带 .active 类的才 display: block（或 flex）；按钮同理，仅当前激活项加 .active。CSS 里别写死颜色或尺寸，用自定义属性（--tab-bg、--tab-height）留出定制入口。
- HTML 中每个
<li>必须有data-tab，对应面板的id值要完全一致（大小写、连字符都不能错） - JavaScript 里用
document.querySelectorAll('[data-tab]')获取全部按钮，避免漏掉动态插入的节点 - 切换时先清空所有
.active，再给当前按钮和目标面板加类——顺序不能反，否则旧面板可能闪一下 - 如果面板内容含表单或视频，记得在隐藏前暂停播放、重置校验状态，否则 DOM 虽隐藏但逻辑还在跑
纯 CSS 实现时 input[type="radio"] 的坑最多
不用 JS 看似干净，但实际限制极多：radio 必须同名、必须放在面板前面、面板必须是它的后续兄弟元素（~ 选择器只管后面）。一旦结构稍变，整个选项卡就失效。
常见翻车场景：想把标签做成横向导航栏，但把 label 和 input 拆到不同容器里——这时 for 属性失效，:checked 无法触发样式切换。
-
input必须和对应label在同一父级下，且label的for值等于input的id - 面板元素必须紧跟在某个
input后面，且中间不能插其他非兄弟元素（比如<div class="spacer"></div>就会断链） - 移动端 Safari 对
:checked ~ .panel的渲染有时延迟，建议加transition: opacity .2s缓解突兀感 - 无法通过脚本“默认选中第 N 个”，因为
checked是 HTML 属性，不是 DOM 属性，el.checked = true不触发样式重绘
Bootstrap 5 的 data-bs-toggle="tab" 要配对使用
它省事，但容错率低：导航链接的 href 必须精确匹配目标 .tab-pane 的 id，且两者都得在同一个 .tab-content 容器内。漏掉 .show 类，第一个面板就不显示；少写 data-bs-toggle="tab"，点击直接跳页。
定制性弱在样式层：所有交互逻辑被封装进 Bootstrap JS，你想改切换动画或加加载态，就得覆盖 JS 或 fork 源码。
-
@#@#@#@#@#@#@#@#@#@0对应的面板必须是<div id="profile" class="tab-pane">...</div> -
.tab-pane必须包裹在<div class="tab-content"> 内，否则 JS 找不到上下文 <li>初始激活项必须同时加 <code>class="nav-link active"和class="tab-pane fade show active" - 如果页面用
history.pushState改 URL，Bootstrap 不会自动同步 tab 状态，得手动调bootstrap.Tab.getInstance(el).show() - 给导航容器加
role="tablist"，每个按钮加role="tab"和aria-controls="panel-id" - 面板加
role="tabpanel"和aria-labelledby="tab-id" - 用
tabindex="-1"控制面板本身不可键盘聚焦，但内部元素保留tabindex="0" - 切换后执行
panelEl.querySelector('input, button, [href]')?.focus()，避免焦点丢失
细节决定可定制程度：焦点管理与键盘支持常被忽略
高度可定制不只是外观自由，还包括行为可控。比如用户按 Tab 键进入选项卡区域后，应该能用 ←/→ 切换标签，Enter 或 Space 激活——这需要手动监听 keydown 并调用 focus() 和 click()。
另外，每次切换后，焦点应落到对应面板首个可聚焦元素（如输入框），否则屏幕阅读器用户会卡在空白处。
