时间戳

首页 > 解决方案 > Bootstrap 4“全部”选项卡

javascript - Bootstrap 4“全部”选项卡

问题描述

我使用 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>

标签： javascripthtmljquerycssbootstrap-4

解决方案

您必须手动添加一些控制“全部”链接行为的 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>

推荐阅读