我正在使用bootstraps选项卡功能如下：

<div class="tabBar container">
    <ul class="nav nav-tabs nav-justified">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#about">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pick a Quiz</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" data-toggle="tab" href="#">History</a>
          <a class="dropdown-item" data-toggle="tab" href="#">Philosophy</a>
          <a class="dropdown-item" data-toggle="tab" href="#">Science</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#leaderboards" role="tab">Leaderboards</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#login">Login</a>
      </li>
    </ul>
</div>

如果其中一个选项卡具有“活动”类，则会突出显示该类 . 但是，当单击新选项卡时，突出显示不会更改，并且只有初始活动选项卡具有突出显示（在我的情况下，“关于”选项卡） .

  • 有没有办法使用bootstrap将高亮显示更改为实际有效的？和...

  • 如果没有，是否有更简单的替代方法，而不是使用jQuery在单击另一个选项卡时添加和删除相应选项卡上的活动类，这似乎涉及向每个选项卡添加唯一ID并为每个选项卡添加jQuery单击事件，即：

$('#tab2').click(function() {
    $(this).addClass('active');
    $('#tab1').removeClass('active');
  });

  $('#tab3').click(function() {
    $(this).addClass('active');
    $('#tab1').removeClass('active');
    $('#tab2').removeClass('active');
  });

等等

jquery twitter-bootstrap tabs