1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = 'utf-8'> 5 <title>test</title> 6 <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"> 7 <link rel="stylesheet" type="text/css" href="2_3.css"> 8 </head> 9 <body> 10 <ul class="nav nav-tabs" id="tabs1"> 11 <li class="active"><a href="#tab1" data-taggle="tab" class="t1">tab1</a></li> 12 <li><a href="#tab2" data-taggle="tab" class="t2">tab2</a></li> 13 <li><a href="#tab3" data-taggle="tab" class="t3">tab3</a></li> 14 <li><a href="#tab4" data-taggle="tab" class="t4">tab4</a></li> 15 </ul> 16 <div class="tab-content"> 17 <div class="tab-pane active" id="tab1"> 18 <img src="../images/1.jpg"> 19 </div> 20 <div class="tab-pane" id="tab2"> 21 <img src="../images/2.jpg"> 22 </div> 23 <div class="tab-pane" id="tab3"> 24 <img src="../images/3.jpg"> 25 </div> 26 <div class="tab-pane" id="tab4"> 27 <img src="../images/4.jpg"> 28 </div> 29 </div> 30 31 <!--將js置於文檔的尾部 --> 32 <script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script> 33 <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script> 34 <script type="text/javascript"> 35 36 $(function () { 37 38 //$('#tabs1 a:last').tab('show');//初始化顯示哪個tab 39 40 $('#tabs1 a').click(function (e) { 41 42 e.preventDefault();//阻止a鏈接的跳轉行為 43 44 $(this).tab('show');//顯示當前選中的鏈接及關聯的content 45 }) 46 }); 47 </script> 48 </body> 49 </html>
更多靈活的方式來激活某個特定的tab：
1 $('#myTab a[href="#profile"]').tab('show'); // Select tab by name 2 3 $('#myTab a:first').tab('show'); // Select first tab 4 5 $('#myTab a:last').tab('show'); // Select last tab 6 7 $('#myTab li:eq(2) a').tab('show');
注意： 每個li中的a標簽都要有個href=#id,這個id指向的正是該鏈接對應的content的id，如果使用javascript實現這種導航內容的切換，a標簽中無須再添加data-toggle='tab'，當然，如果每個a鏈接都使用了此屬性，那完全沒有必要在用js來實現了。