Bootstrap 双 Tab 标签效果
最近有个前端需求，需要做双Tab，国外管双标签效果叫 Nested Tab。搜了下 Bootstrap3 和 Bootstrap4 的双 Tab 效果，感觉还可以，记录一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="tabbable boxed parentTabs p-4">
<ul class="nav nav-tabs">
<li class="active"><a href="#set1" class="nav-link">Set1</a></li>
<li><a href="#set2" class="nav-link">Set2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="set1">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub11" class="nav-link">Set1-Tab1</a></li>
<li><a href="#sub12" class="nav-link">Set1-Tab2</a></li>
<li><a href="#sub13" class="nav-link">Set1-Tab3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="sub11">
<p>Tab1 Content</p>
</div>
<div class="tab-pane fade" id="sub12">
<p>Tab2 Content</p>
</div>
<div class="tab-pane fade" id="sub13">
<p>Tab3 Content</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="set2">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub21" class="nav-link">Set2-Tab1</a></li>
<li><a href="#sub22" class="nav-link">Set2-Tab2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="sub21">
<p>Set2-Tab1-Content</p>
</div>
<div class="tab-pane fade" id="sub22">
<p>Set2-Tab2-Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("ul.nav-tabs a").click(function (e) {
e.preventDefault();
$(this).tab("show");
});
</script>
</body>
</html>
Bootstrap3 双 Tabs 效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a href="#divstyle" data-toggle="tab">风格设置</a></li>
<li><a href="#divmystyle" data-toggle="tab">自定义风格</a></li>
<li><a href="#divbanshi" data-toggle="tab">版式设置</a></li>
</ul>
<div class="tab-content">
<!--1-->
<div class="tab-pane active" id="divstyle">
<div class="tabbable" style="margin: 3px;">
<ul class="nav nav-pills" id="divstyletab">
<li class="active"><a href="#tab11" data-toggle="tab">最近</a></li>
<li><a href="#tab12" data-toggle="tab">人文</a></li>
<li><a href="#tab13" data-toggle="tab">人文</a></li>
</ul>
<div class="tab-content">
<!-- 第一个tab -->
<div class="tab-pane fade active in" id="tab11">
a
</div>
<!-- 第二个tab -->
<div class="tab-pane fade" id="tab12">
b
</div>
<!-- 第三个tab -->
<div class="tab-pane fade" id="tab13">
c
</div>
<!-- 中间图表结束 -->
</div>
</div>
</div>
<!-- 2 -->
<div class="tab-pane" id="divmystyle">
<div class="tabbable" style="margin: 3px;">
<ul class="nav nav-pills" id="divstyletab">
<li class="active"><a href="#tab21" data-toggle="tab">最近</a></li>
<li><a href="#tab22" data-toggle="tab">人文</a></li>
<li><a href="#tab23" data-toggle="tab">人文</a></li>
</ul>
<div class="tab-content">
<!-- 第一个tab -->
<div class="tab-pane fade active in" id="tab21">
aa
</div>
<!-- 第二个tab -->
<div class="tab-pane fade" id="tab22">
bb
</div>
<!-- 第三个tab -->
<div class="tab-pane fade" id="tab23">
cc
</div>
<!-- 中间图表结束 -->
</div>
</div>
</div>
<!-- 3 -->
<div class="tab-pane" id="divbanshi">
<div class="tabbable" style="margin: 3px;">
<ul class="nav nav-pills" id="divstyletab">
<li class="active"><a href="#tab31" data-toggle="tab">最近</a></li>
<li><a href="#tab32" data-toggle="tab">人文</a></li>
<li><a href="#tab33" data-toggle="tab">人文</a></li>
</ul>
<div class="tab-content">
<!-- 第一个tab -->
<div class="tab-pane fade active in" id="tab31">
aaa
</div>
<!-- 第二个tab -->
<div class="tab-pane fade" id="tab32">
bbb
</div>
<!-- 第三个tab -->
<div class="tab-pane fade" id="tab33">
ccc
</div>
<!-- 中间图表结束 -->
</div>
</div>
</div>
<!-- tab end -->
</div>
<script type="text/javascript">
$(function() {
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
$('#divstyletab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
</script>
</body>
</html>