Bootstrap 5 Tabs 淡入需为每个 tab-pane 同时添加 fade、show 和 active 类，并配 transition；data-bs-toggle 替代 data-toggle；href 或 data-bs-target 必须与 tab-pane id 严格一致。
tab-pane 必须加 fade 类，否则切换无淡入效果
Bootstrap 5 的 Tabs 默认是“硬切”——点击后内容瞬间替换，没有过渡动画。想启用淡入淡出，fade 是强制前提，不是可选修饰。它本身不带任何动画逻辑，只是为后续 transition 提供 CSS 钩子。
常见错误是只给第一个 tab-pane 加 show，却漏掉 fade，结果初始内容可见，但切换时仍“啪”一下跳变。
- 每个
tab-pane都要加fade类，一个都不能少 -
fade必须和tab-pane同级存在，不能只写在父容器上 - 如果用 JS 动态插入新 tab-pane，插入后得手动补上
fade类，否则新面板切换无效
第一个 tab-pane 还得额外加 show active
即使写了 fade，若第一个面板没 show，页面加载后内容区就是空白的——fade 不负责初始显隐，它只管过渡；show 才真正让内容可见（同时触发 opacity: 1）。
active 则用于同步标签页头部的高亮状态，缺了会导致“内容显示了但头部没选中”，UI 错位。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<div class="tab-pane fade show active" id="home">...</div> - 仅加
fade和active不行，会因 opacity: 0 而不可见 - JS 初始化 Tab 实例前，DOM 必须已含
show active，否则 Bootstrap 不会渲染首屏
data-bs-toggle="tab" 不能写成 data-toggle="tab"
Bootstrap 5 彻底废弃了 data-toggle，全部迁移至 data-bs-toggle 命名空间。如果你复制的是 Bootstrap 3/4 教程代码，点标签页完全没反应，控制台也静悄悄——这是最常卡住人的地方，不是 JS 报错，而是属性压根没被识别。
另外，tab-pane 的 id 必须和对应标签的 href 或 data-bs-target 完全一致（包括 # 符号），否则 JS 找不到目标面板，切换失效。
- 标签写法必须是：
<a href="#home" data-bs-toggle="tab">首页</a>或<a data-bs-target="#home" data-bs-toggle="tab">首页</a> - 别混用：
href和data-bs-target二选一，同时写可能引发冲突 - 确保所有相关元素都在 DOM 加载完成后才执行
new bootstrap.Tab(...)，否则querySelector返回 null
淡入淡出依赖 opacity + transition，别碰 visibility
Bootstrap 自身的 .fade 类只设了 opacity: 0 和 opacity: 1，但没配 transition。所以你得自己加 CSS 补上：
.tab-pane.fade {
transition: opacity 0.15s ease-in-out;
}注意别用 visibility 控制显隐——visibility: hidden 会打断 opacity 动画，导致淡入失败或闪烁。Bootstrap 5 的 Tabs 内部靠 opacity 和 display 配合，visibility 是 tooltip/dropdown 等组件的机制，混用会冲突。
动画时长建议用 0.15s，比默认 0.2s 更轻快，贴合选项卡的交互节奏；过长显得迟滞，过短则像没动。
最容易被忽略的一点：如果你用自定义 CSS 覆盖了 .tab-pane 的 display（比如改成 display: grid），可能破坏 Bootstrap 的显示逻辑，导致 show 失效——保持 display: block 最稳妥。
