Bootstrap标签页插件

1.用法
通过data属性，添加data-toggle=”tab”或data-toggle=”pill”到锚文本链接中

<ul class="nav nav-tabs">
   <li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>

通过javascript启用

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

2.淡入淡出效果
添加data-toggle:tab

<!--导航栏中每个块-->
<ul id="myTab" class="nav nav-tabs">
  <li class="active"> <a href="#home" data-toggle="tab"> home </a> </li>
  <li><a href="#html" data-toggle="tab">html</a></li>
  <li><a href="#css" data-toggle="tab">css</a></li>
  <li class="dropdown"> <a href="#" id="myTabDrop" class="dropdown-toggle" data-toggle="dropdown"> javascript<span class="caret"></span> </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop">
      <li><a href="#jquery" data-toggle="tab">jquery</a></li>
      <li><a href="#ajax" data-toggle="tab">ajax</a></li>
    </ul>
  </li>
</ul>
<!--每个页面显示的内容-->
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active "id="home">
    <h1>home</h1>
    <p>home部分</p>
  </div>
  <div class="tab-pane fade in active "id="html">
    <h1>html</h1>
    <p>html部分</p>
  </div>
  <div class="tab-pane fade in active" id="css">
    <h1>css</h1>
    <p> css部分</p>
  </div>
  <div class="tab-pane fade in active" id="jquery">
    <h1>jquery</h1>
    <p>jquery部分</p>
  </div>
  <div class="tab-pane fade in active" id="ajax">
    <h1>ajax</h1>
    <p>ajax部分</p>
  </div>
</div>