Bootstrap 4标签页Active状态无法切换问题求助

我帮你排查过了，这个问题是因为你沿用了Bootstrap 3的标签页结构写法，但Bootstrap 4的导航组件规范已经更新了，导致JS无法正确识别并切换Active状态。下面是具体的问题分析和修正方案：

问题根源 #

Bootstrap 4中，标签页（nav-tabs）的结构有明确要求：

• 每个列表项<li>必须添加.nav-item类
• 激活状态（.active）需要加在<a>标签上，而非<li>标签
• <a>标签必须添加.nav-link类，这是Bootstrap 4标签页JS识别可切换项的关键类

你的原代码里缺少这些必要的类，而且把Active状态放在了<li>上，导致点击时JS无法触发状态切换逻辑。

修正后的完整代码 #

<ul class="nav nav-tabs control-btn">
  <li class="nav-item">
    <a data-toggle="tab" href="#quiz01" class="nav-link active btn btn-info" role="button">01</a>
  </li>
  <li class="nav-item">
    <a data-toggle="tab" href="#quiz02" class="nav-link btn btn-info" role="button">02</a>
  </li>
  <li class="nav-item">
    <a data-toggle="tab" href="#quiz03" class="nav-link btn btn-info" role="button">03</a>
  </li>
</ul>

<!-- 对应的标签页内容区域也需要保持正确结构 -->
<div class="tab-content">
  <div id="quiz01" class="tab-pane active">
    <!-- 第一页内容 -->
  </div>
  <div id="quiz02" class="tab-pane">
    <!-- 第二页内容 -->
  </div>
  <div id="quiz03" class="tab-pane">
    <!-- 第三页内容 -->
  </div>
</div>

关键改动说明 #

• 给每个<li>添加了.nav-item类：这是Bootstrap 4导航组件的必填结构类，确保样式和JS逻辑正常绑定
• 将.active类从<li>移到了对应的<a>标签上：Bootstrap 4的标签页JS会监听.nav-link的点击事件，自动切换该类的位置
• 给每个<a>标签添加了.nav-link类：这是JS识别可切换标签的核心标识，没有它，状态切换逻辑完全不会生效
• 保留了你原来的.btn btn-info类：如果觉得按钮样式和导航链接样式有冲突，可以自定义CSS调整，或者改用Bootstrap的nav-pills（胶囊式导航）搭配按钮样式

这样修改后，点击导航链接时，Active状态就会正常切换了。

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