Bootstrap 4选项卡内容异常求助：加载无激活内容、无渐隐效果

嘿，刚上手Bootstrap 4的选项卡确实容易踩这些小坑，我来帮你捋捋这两个问题的原因和解决办法：

问题1：页面加载时激活选项卡对应的内容未显示 #

这个问题大概率是因为你漏加了关键的类名。Bootstrap 4的选项卡需要同时给激活的选项卡和对应的内容面板设置正确的类：

• 激活的选项卡（.nav-link）需要加active类；
• 对应的内容面板（.tab-pane）需要同时加active和show类——因为.tab-pane默认是display: none，只有.active.show才能让它在页面加载时显示出来。

如果只加了active没加show，内容面板还是会处于隐藏状态，这是很多新手容易忽略的点。

问题2：非激活选项卡内容直接变透明，没有淡出效果 #

Bootstrap 4的选项卡切换默认是没有淡出动画的，需要手动给每个.tab-pane添加fade类。这样切换时，内容面板会通过CSS过渡实现淡出/淡入的效果，而不是直接跳变透明度。

另外要注意：激活的那个.tab-pane除了active和show，也要保留fade类，这样初始显示的内容也会有淡入的过渡（如果需要的话）。

完整的正确示例代码 #

<!-- 选项卡导航 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">联系我们</a>
  </li>
</ul>

<!-- 选项卡内容 -->
<div class="tab-content" id="myTabContent">
  <!-- 激活的内容面板：同时加fade、active、show -->
  <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
    这是首页的内容，页面加载时会显示
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    这是个人资料的内容，切换时会淡出/淡入
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    这是联系我们的内容，切换时会淡出/淡入
  </div>
</div>

额外注意事项 #

• 确保你正确引入了Bootstrap的依赖：顺序是jQuery → Popper.js → Bootstrap.js，因为Bootstrap的JS组件依赖这两个库；
• 检查有没有自定义CSS覆盖了Bootstrap的.tab-pane或.fade类的样式，比如如果自定义了display或者transition属性，可能会破坏默认的动画和显示逻辑。

内容的提问来源于stack exchange，提问作者Razvan Zamfir