bootstrap双重tab嵌套
钱旻
在做项目时，遇到双重嵌套的问题，看到了一篇博主的文章，非常简便，可以直接拿来用。
http://blog.csdn.net/qq_33988065/article/details/51690860
我又更新了一下，实现了双层嵌套的目录结构。
1.HTML文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<link rel="stylesheet" href="public/css/bootstrap-tab.css">
<title>bootstrap双重嵌套</title>
</head>
<body>
<div class="container">
<div class="row">
<!-- 菜单展示 -->
<div class="col-xs-3">
<ul id="myTab" class="nav nav-tabs nav-stacked">
<li class="menu active">
<a href="#tab1" class="menu_1" data-toggle="tab">一级目录1</a>
<ul class="nav menu_2">
<li class="active">
<a href="#tab1-1" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>二级目录1-1
</a>
</li>
<li>
<a href="#tab1-2" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>二级目录1-2
</a>
</li>
<li>
<a href="#tab1-3" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>二级目录1-3
</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#tab2" class="menu_1" data-toggle="tab">一级目录2</a>
<ul class="nav menu_2">
<li class="active">
<a href="#tab2-1" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>二级目录2-1
</a>
</li>
<li>
<a href="#tab2-2" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>二级目录2-2
</a>
</li>
</ul>
</li>
<li class="menu" >
<a href="#tab3" class="menu_1" data-toggle="tab">一级目录3</a>
<ul class="nav menu_2">
<li class="active">
<a href="#tab3-1" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>三级目录3-1
</a>
</li>
<li>
<a href="#tab3-2" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>三级目录3-2
</a>
</li>
<li>
<a href="#tab3-3" data-toggle="tab">
<span class="fa fa-angle-double-right"></span>三级目录3-3
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- 内容展示 -->
<div class="col-xs-9">
<div class="show_charts tab-content">
<div class="tab-pane active" id="tab1">
<div class="tab-content conecharts">
<div class="tab-pane fade in active charts" id="tab1-1">二级目录1-1</div>
<div class="tab-pane fade charts" id="tab1-2">二级目录1-2</div>
<div class="tab-pane fade charts" id="tab1-3"> 二级目录1-3</div>
</div>
</div>
<!--end of #tab1-->
<div class="tab-pane" id="tab2">
<div class="tab-content conecharts">
<div id="tab2-1" class="tab-pane fade in active charts">二级目录2-1</div>
<div id="tab2-2" class="tab-pane fade charts">二级目录2-2</div>
</div>
</div>
<!--end of #tab2-->
<div class="tab-pane" id="tab3" >
<div class="tab-content conecharts">
<div id="tab3-1" class="tab-pane fade in active charts">三级目录3-1</div>
<div id="tab3-2" class="tab-pane fade charts">三级目录3-2</div>
<div id="tab3-3" class="tab-pane fade charts">三级目录3-3</div>
</div>
</div>
<!--end of #tab3-->
</div>
<!--end of .show_charts-->
</div>
<!--end of .col-xs-9-->
</div>
<!--end of .row-->
</div>
<!--end of .container-->
<script src="public/js/jquery.min.js" type="text/javascript"></script>
<script src="public/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// 阻止 tab-pane的默认显示
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
$('.menu_2 a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
// 点击标签时，激活标签
$('.menu').click(function(){
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
});
</script>
</body>
</html>2.CSS代码
/*
* 本页面用于bootstrap-tab.html
*/
/*
* 本部分用于页面整体架构
*/
body {
position: relative;
line-height: 1.5;
font-family: 'Raleway', sans-serif;
text-align: center;
background-color: #ccc;
}
.container {
margin-top: 30px;
}
/* 页面架构——数据展示 */
/* 数据展示内容框架 */
.show_charts{
height: auto;
background-color: #ccc;
margin: 0 0 200px 0;
overflow: auto;
overflow-x: hidden;
}
/* 数据内容展示——一级框架 */
.conecharts{
background-color:#fff;
width:100%;
padding: 20px;
}
/* 数据内容展示——二级框架 */
.charts{
width: 800px;
height: 350px;
background-color: #fff;
margin: 20px auto;
}
/*
* 本部分用于页面common组件构建——目录
*/
/* 目录整体样式 */
.nav {
background: #fff;
}
.nav a {
color: black;
font-style: normal;
}
/* 目录整体样式——悬停、点击样式 */
.nav li a:hover,
.nav li a:focus {
background: #eee;
}
/* 目录整体样式——当前激活目录*/
.nav .active {
font-weight: bold;
background: #eee;
}
/* 一级目录——静止状态样式*/
.nav-tabs>li>a {
font-weight: bold;
padding-right: 100px;
}
/* 一级目录——激活状态——静止、悬停、点击样式*/
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
background-color: #3071a9;
font-weight: bold;
color: #fff;
}
/* 二级目录——静止状态——隐藏*/
.nav .nav {
display: none;
}
/* 一级目录激活，二级目录显示*/
.nav .active .nav {
display: block;
}
/* 二级目录——静止状态——超链接样式*/
.nav .nav a {
font-weight: normal;
font-size: .85em;
}
/* 二级目录——静止状态——图标样式 */
.nav .nav span {
margin: 0 5px 0 2px;
}
/* 二级目录——激活状态——超链接静止、悬停、点击样式*/
.nav .nav .active a,
.nav .nav .active:hover a,
.nav .nav .active:focus a {
font-weight: bold;
padding-left: 30px;
border-left: 5px solid #3071a9;
}
/* 二级目录——激活状态——图标静止、悬停、点击样式样式*/
.nav .nav .active span,
.nav .nav .active:hover span,
.nav .nav .active:focus span {
display: none;
}
类似资料：