时间戳

首页 > 解决方案 > 在 Bootstrap 4 导航选项卡上切换样式

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

问题描述

我一直在尝试设置样式nav-tabs，以便当前选项卡在选择时始终具有不同的外观。我设置了这个最小的文件进行测试。单击选项卡时，内容会正确更改，但我无法弄清楚如何将 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>

标签： cssbootstrap-4

解决方案

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

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

“淡入淡出”类的两种用法并不是严格要求的，而是增加了一种微妙的效果。

<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>

推荐阅读