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>