Bootstrap 4导航栏标签无法切换内容，求3.3.5版tab-content替代方案

嘿，我刚好踩过Bootstrap从3.x升级到4的坑，你遇到的标签内容切换问题其实很好解决——Bootstrap 4里依然保留了tab-content这个核心容器，只是配合的类名和细节有调整，和3.x的核心逻辑是一致的，我给你捋清楚：

核心对应关系与调整点 #

• Bootstrap 3里的tab-content和tab-pane在4里完全保留，但激活状态的控制有变化：
  • 导航项的激活类从给<li>的active，改成给<a>标签的nav-link active
  • 内容面板的激活状态需要同时加show active（3.x里只需要active，4里必须加show才能让内容显示出来）

完整可运行的代码示例 #

直接拿这个代码替换你现有的导航和内容区域就能用：

<!-- 导航标签栏 -->
<ul class="nav nav-tabs" id="customTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">标签1</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">标签2</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">标签3</a>
  </li>
</ul>

<!-- 内容切换区域（对应3.x的tab-content） -->
<div class="tab-content" id="customTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    这是标签1对应的内容区域，和3.x里的tab-pane用法一致，只是多了show类
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
    标签2的内容，切换时会自动加上show active类
  </div>
  <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
    标签3的内容，同样遵循这个规则
  </div>
</div>

关键注意事项 #

• 一定要确保引入了Bootstrap 4的JS文件，而且顺序要对：先引入jQuery，再引入Popper.js，最后引入Bootstrap JS（Bootstrap 4的组件依赖这两个库），否则切换功能会失效
• data-toggle="tab"这个属性是触发切换的核心，和3.x完全一致，不能丢

其实不用特意找YouTube教程，Bootstrap官方文档里的标签页组件部分讲得很细致，核心就是这些类名的小调整，照着上面的示例改，就能实现和3.3.5里tab-content一模一样的切换效果啦。

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