01_bootStrap中Tab页签切换

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