bootstrap 二级菜单选项卡

<div class="tabbable">
<div class="nav nav-tabs">
<h2>个人中心</h2>
<div class="nav-header" ><a href="#userMeun" data-toggle="collapse">查询方法 <i class="icon icon_down_triangle"></i></a>
</div>
<ul id="userMeun" class="nav nav-list collapse in">
<li><a href="#tab1" data-toggle="tab"> 方法一</a></li>
<li><a href="#tab2" data-toggle="tab"> 方法二</a></li>
</ul>
<div class="nav-header" data-toggle="collapse"><a href="#tab3" data-toggle="tab"> 一级菜单</a></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="content">
方法一

</div>
</div>
<div class="tab-pane" id="tab2">
<div class="content tab_describe">
方法2
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="content tab_describe">
方法3
</div>
</div>
</div>
</div>

　　

　　方法一：标签页的切换

//标签页切换导航，让标签可切换, 需在.tab-content里创建.tab-pane, 并对每个标签设置一个唯一的ID.要让内容淡入, 需在每个
.tab-pane
添加[code].fade

.或.in[/code]

标签页切换 最基本的格式
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>

　　方法二：折叠

只要在元素上添加

data-toggle="collapse"

和

data-target

就能自动变成可折叠的。

data-target

属性接受一个css选择器，以选取元素添加折叠。 一定要在折叠元素上添加

collapse

。如果要默认某折叠元素是打开的，只要添加

.in

。

如需要添加一个手风琴式可折叠组, 则需添加

data-parent="#selector"

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>

<div id="demo" class="collapse in"> … </div>

　这个二级导航菜单 就是这2种简单bootsrap js组件的结合

但是 其中 对于 active 的选中是有问题的 需要自己另外写点方法

//memberlist 二级菜单点击下拉
$('.tabbable a[data-toggle="tab"]').eq(0).tab('show');
$('.tabbable a[data-toggle="tab"]').on('click', function (e) {

$('.tabbable a[data-toggle="tab"]').parent('li').removeClass('active');
$('.tabbable a[data-toggle="tab"]').removeClass('active');
$(this).addClass('active');

});