Question

我一直在尝试设置nav-tabs的样式，以使 current 标签在被选择时始终具有不同的外观。我设置了此最小文件进行测试。单击选项卡后，内容可以正确更改，但是我不知道如何将CSS样式应用于当前选择的选项卡。

我在文件中做错了什么吗？在给定本文档所调用的当前资源的情况下，是否有一种简单的方法来完成样式设置（例如更改活动选项卡的背景颜色）？我的目标是在不使用任何其他JavaScript的情况下，使项目占用空间尽可能小。

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item active">
      <a href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane">
      <h2>Second</h2>
    </div>
  </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

添加一个在选项卡上的click事件上具有首选样式的类。

提供标签的特定ID，例如#Tab1和#Tab2

尝试：

$('#Tab1').on('click', function () {
   $('#Tab1').addClass('active');
   $('#Tab2').removeClass('active');
});

然后对第二个选项卡执行相反的操作。

$('#Tab2').on('click', function () {
   $('#Tab2').addClass('active');
   $('#Tab1').removeClass('active');
});

Answer 2

事实证明，默认的Bootstrap 4提供了一种完全实现我想要的方式的方法。这是原始帖子的最终版本。

从<li>元素中删除了“活动”
为“ <li>”锚添加了“ nav-item”类
为第一个<li>锚点添加了“活动”类
在第一个“标签窗格” <div>
将“淡入淡出”类添加到第二个“选项卡窗格” <div>

“ fade”类的两种用法不是严格要求的，但会带来微妙的效果。

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane fade show active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane fade">
      <h2>Second</h2>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

在Bootstrap 4导航选项卡上切换样式

2 个答案: