Bootstrap Tab

参考：

• Bootstrap JS Tab

选项卡

1..nav nav-tabs类创建标签页

  <ul class="nav nav-tabs" role="tablist">    <li class="active"><a href="#">Home</a></li>    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">About</a></li>          </ul>

2..nav-justified类可以很容易的让标签页或胶囊式标签呈现出同等宽度

3..tab-content类，和.tab-pane 和 data-toggle="tab"一起，它使标签可切换

4..tab-pane类，和.tab-pane 和 data-toggle="tab"一起，它使标签可切换

如下的例子，给每个tab添加data-toggle="tab"，并为每个选项卡添加一个具有唯一ID的.tab-pane类，并将它们包装在.tab-content类中

<div class="container">  <h2>Dynamic Tabs</h2>  <ul class="nav nav-tabs">    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>  </ul>  <div class="tab-content">    <div id="home" class="tab-pane fade in active">      <h3>HOME</h3>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div>    <div id="menu1" class="tab-pane fade">      <h3>Menu 1</h3>      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>    </div>    <div id="menu2" class="tab-pane fade">      <h3>Menu 2</h3>      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>    </div>    <div id="menu3" class="tab-pane fade">      <h3>Menu 3</h3>      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>    </div>  </div></div>

通过JavaScript控制

<div class="container">  <h2>Dynamic Tabs</h2>  <ul class="nav nav-tabs">    <li class="active"><a href="#home">Home</a></li>    <li><a href="#menu1">Menu 1</a></li>    <li><a href="#menu2">Menu 2</a></li>    <li><a href="#menu3">Menu 3</a></li>  </ul>  <div class="tab-content">    <div id="home" class="tab-pane fade in active">      <h3>HOME</h3>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div>    <div id="menu1" class="tab-pane fade">      <h3>Menu 1</h3>      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>    </div>    <div id="menu2" class="tab-pane fade">      <h3>Menu 2</h3>      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>    </div>    <div id="menu3" class="tab-pane fade">      <h3>Menu 3</h3>      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>    </div>  </div></div><script>$(document).ready(function(){    $(".nav-tabs a").click(function(){        $(this).tab('show');    });});</script>

还有如下的形式：

// Select all tabs$('.nav-tabs a').click(function(){    $(this).tab('show');})// Select tab by name$('.nav-tabs a[href="#home"]').tab('show')// Select first tab$('.nav-tabs a:first').tab('show') // Select last tab$('.nav-tabs a:last').tab('show') // Select fourth tab (zero-based)$('.nav-tabs li:eq(3) a').tab('show')