Question

我正在使用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 click事件每一个，即：

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

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

等。等

为什么不引导自动更改活动选项卡上的突出显示？

0 个答案: