Bootstrap 4“全部”选项卡

Question

我使用 Bootstrap 4“tablist”创建了可切换的选项卡，它们是可切换的并且工作得很好。

我想创建一个“全部”选项卡，该选项卡将显示所有不同选项卡的所有内容，但不知道如何使“全部”选项卡工作！ 非常感谢任何帮助！

这是我的标签标题：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div>
  <ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#cases">Cases</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#revrul">Rev. Rul.s & Notices</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#regs">Regulations</a></li>
  </ul>
  <div class="tab-content">
    <div id="cases" class="container tab-pane active"><br>
      <h3>Cases</h3>
      <ul> Content for cases here</ul>
    </div>
    <div id="revrul" class="container tab-pane fade"><br>
      <h3>Rev. Rul.s &amp; Notices</h3>
      <ul> Content for rulings here</ul>
    </div>
  </div>
  <div id="regs" class="container tab-pane fade"><br>
    <h3>Regulations</h3>
    <ul> Content for regulations here </ul>
  </div>
</div>

Answer 1

您必须手动添加一些控制“全部”链接行为的 JS。

你想做的是：

• 创建一个用于显示所有内容的特殊选项卡，ID 为 #show_all
• 单击此选项卡时，它会将 .active 和 .show 类添加到所有窗格中，以便它们都可见。
• 当您单击没有 #show_all ID 的选项卡时，它会从所有不是您要查找的选项卡窗格中删除 .show 和 .active 类。

这是一个有效的 sn-p。

$("#show_all").on("click", function() {
  $(this).addClass("active").parent("li").siblings().find("a").removeClass("active");
  $(".tab-pane").removeClass("fade").addClass("active").addClass("show");
});
$(".nav-link").not("#show_all").on("click", function() {
  console.log(this.hash);
  $(".tab-pane").not(this.hash).removeClass("active").removeClass("show");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#cases">Cases</a></li>
  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#revrul">Rev. Rul.s & Notices</a></li>
  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#regs">Regulations</a></li>
  <li class="nav-item"><a class="nav-link" href="#" id="show_all">All</a></li>
</ul>

<div class="tab-content">
  <div id="cases" class="container tab-pane active"><br>
    <h3>Cases</h3>
    <ul> Content for cases here</ul>
  </div>
  <div id="revrul" class="container tab-pane fade"><br>
    <h3>Rev. Rul.s & Notices</h3>
    <ul> Content for rulings here</ul>
  </div>
  <div id="regs" class="container tab-pane fade"><br>
    <h3>Regulations</h3>
    <ul> Content for regulations here </ul>
  </div>
</div>

Answer 2

试试这个

$( ".tabContent" ).clone().appendTo("#tabContent");

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#all">All</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cases">Cases</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#revrul">Rev. Rul.s & Notices</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#regs">Regulations</a></li>
</ul>
  
<div class="tab-content">
    <div id="all" class="container tab-pane active">
        <h3>ALL</h3>
        <div id="tabContent">
            
        </div>
    </div>
    <div id="cases" class="container tab-pane active">
        <div class="tabContent">
            <h3>Cases</h3>
            <ul> Content for cases here</ul>
        </div>
    </div>
    <div id="revrul" class="container tab-pane fade">
        <div class="tabContent">
            <h3>Rev. Rul.s & Notices</h3>
            <ul> Content for rulings here</ul>
        </div>
    </div>
    <div id="regs" class="container tab-pane fade">
        <div class="tabContent">
            <h3>Regulations</h3>
            <ul> Content for regulations here </ul>
        </div>
    </div>
</div>