bootstrap双重tab嵌套

来源：互联网发布：剑网成男捏脸数据编辑：程序博客网时间：2024/05/13 11:40

在做项目时，遇到双重嵌套的问题，看到了一篇博主的文章，非常简便，可以直接拿来用。
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;}

阅读全文

1 0