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来实现了。