bootstrap——js插件（二、其他）

1、完整标签页

1）创建导航

ul\.nav\.nav-tabs

2）给每一个a添加切换事件

给a添加href="#tabid"，data-toggle="tab"
给其中一个li添加.active使其变成激活状态

3）创建分页内容

div\.tab-content
div\.tab-pane
创建一个div，添加.nav-content包裹全部tab内容
每一个tab的div需要添加.tab-pane

 <ul class="nav nav-tabs">
     <li class="active"><a href="#item1" data-toggle="tab">item1</a></li>
     <li><a href="#item2" data-toggle="tab">item2</a></li>
     <li><a href="#item3" data-toggle="tab">item3</a></li>
 </ul>
 <div class="tab-content">
     <div id="item1" class="tab-pane active">item1</div>
     <div id="item2" class="tab-pane">item2</div>
     <div id="item3" class="tab-pane">item3</div>
 </div>

4）标签页的事件

show.bs.tab
shown.bs.tab
hide.bs.tab
hidden.bs.tab

例子：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})