Question

我已经使用Bootstrap 4“选项卡列表”创建了可切换选项卡，它们是可切换的，并且运行良好。

我想创建一个“全部”标签，该标签将显示所有不同标签的所有内容，并且无法弄清楚如何使“全部”标签起作用！任何帮助将不胜感激！

这是我的标签标题：

<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

尝试一下

$( ".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>

Answer 2

您将必须手动添加一些JS，以控制“所有”链接的行为。

您要执行的操作是：

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

这是一个有效的代码段。

$("#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>

Bootstrap 4“全部”标签

2 个答案: