<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
添加.fade
.或.in
标签页切换 最基本的格式 <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'); });