引导程序 4 "All"选项卡

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来控制"All"链接的行为。

你想做的是：

• 创建一个用于显示所有内容的特殊选项卡，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>

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>