tab頁籤切換----bootstrap

關於$().tab()通常用來實現標籤頁和膠囊連接內容片斷的切換，或是相關內容的頁面導航：

1. <ul class="nav nav-tabs" id="myTab"> 

2.       <li class="active"><a href="#home">Home</a></li> 

3.       <li><a href="#profile">Profile</a></li> 

4.       <li><a href="#messages">Messages</a></li> 

5.       <li><a href="#settings">Settings</a></li> 

6.     </ul> 

7.     <div class="tab-content"> 

8.       <div class="tab-pane active" id="home">...</div> 

9.       <div class="tab-pane" id="profile">...</div> 

10.       <div class="tab-pane" id="messages">...</div> 

11.       <div class="tab-pane" id="settings">...</div> 

12.     </div>        

        <script> 

13.       $(function () { 

14.         $('#myTab a:last').tab('show');//初始化顯示哪一個tab

15.         $('#myTab a').click(function (e) { 

16.           e.preventDefault();//阻止a連接的跳轉行爲 

17.           $(this).tab('show');//顯示當前選中的連接及關聯的content 

18.         }) 

19.       }) 

20.    </script>
    此外，你還能夠有更多靈活的方式來激活某個特定的tab：
    

21. $('#myTab a[href="#profile"]').tab('show'); // Select tab by name 

22.     $('#myTab a:first').tab('show'); // Select first tab 

23.     $('#myTab a:last').tab('show'); // Select last tab 

24.     $('#myTab li:eq(2) a').tab('show');
    以上代碼須要注意的一點是，每一個li中的a標籤都要有個href=#id,這個id指向的正是該連接對應的content的id，若是使用
    javascript實現這種導航內容的切換，a標籤中無須再添加data-toggle='tab'，固然，若是每一個a連接都使用了此屬性，那徹底沒有
    必要在用js來實現了：
    以上代碼須要注意的一點是，每一個li中的a標籤都要有個href=#id,這個id指向的正是該連接對應的content的id，若是使用
    javascript實現這種導航內容的切換，a標籤中無須再添加data-toggle='tab'，固然，若是每一個a連接都使用了此屬性，那徹底沒有
    必要在用js來實現了：