Bootstrap 选项卡(Tabs)内容切换淡入效果 fade-Bootstrap教程-PHP中文网

加了 fade 类但切换仍是硬切，是因为 fade 仅为 CSS 修饰符，需同时满足：Bootstrap CSS 完整加载、.tab-pane 确含 fade 类、无 display: none !important 等样式覆盖 show 的可见性。

bootstrap 选项卡(tabs)内容切换淡入效果 fade

为什么加了 `fade` 类但切换还是硬切？

因为 fade 类只是 CSS 修饰符，它本身不触发任何 JS 行为，也不自动生效——必须同时满足三个条件：Bootstrap CSS 文件已完整加载、对应 .tab-pane 元素确实存在该类、且没有其他样式（比如 display: none !important）强行覆盖 .show 的可见性。

常见干扰项包括：

漏引 bootstrap.min.css 或用了精简版构建（carousel-fade、tab-pane.fade 相关规则可能被剔除）
.tab-pane 上写了 style="display: none" 或父级设置了 visibility: hidden
自定义 CSS 里写了 .tab-pane { opacity: 1 !important; }，直接废掉 fade 的过渡逻辑

`tab-pane` 必须同时有 `fade` 和 `show active` 吗？

不是全部都要，而是有明确分工：

所有 .tab-pane 都必须带 fade —— 这是淡入淡出动画的“开关”
仅默认激活的那个 .tab-pane 需要额外加 show active —— show 控制初始可见，active 同步导航高亮
其余非激活项只需 fade，Bootstrap JS 会在切换时自动增删 show 和 active

错误写法：<div class="tab-pane fade active" id="home"> —— 缺 <code>show，首次加载内容为空白；正确写法：<div class="tab-pane fade show active" id="home">。<h3>用 JS 手动触发 <code>tab.show() 却没动画？

JS 方法本身不负责动画，它只负责切换类名。是否出现淡入效果，完全取决于目标 .tab-pane 是否已有 fade 类。

动态插入的 .tab-pane，必须在插入 DOM 后、调用 show() 前手动补上 fade 类
不要重复初始化 bootstrap.Tab 实例，否则报错 Tab already initialized
确保执行时机在 DOM 加载完成之后，例如包裹在 DOMContentLoaded 事件里

示例正确调用：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

document.addEventListener('DOMContentLoaded', () => {
  const triggerEl = document.querySelector('[href="#profile"]');
  const tab = new bootstrap.Tab(triggerEl);
  tab.show();
});