3-6 选项卡--JavaScript触发方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

选项卡--JavaScript触发方法

除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。

调用方法:

在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用：

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

 

任务

我来试试：用JS的方法触发Tab切换效果。

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选项卡--JavaScript触发方法</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  9. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  10. <script>
  11.     $(function(){
  12.     $("#myTab a").click(function(e){
  13.         e.preventDefault();
  14.         $(this).tab("show");
  15.     });
  16. })
  17. </script>
  18. </head>
  19. <body>
  20. <!-- 选项卡组件（菜单项nav-pills）-->
  21. <ul id="myTab" class="nav nav-pills" role="tablist">
  22.     <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
  23.     <li><a href="#rule" role="tab" >规则</a></li>
  24.     <li><a href="#forum" role="tab" >论坛</a></li>
  25.     <li><a href="#security" role="tab" >安全</a></li>
  26.     <li><a href="#welfare" role="tab" >公益</a></li>
  27. </ul>
  28. <!-- 选项卡面板 -->
  29. <div id="myTabContent" class="tab-content">
  30.     <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
  31.     <div class="tab-pane fade" id="rule">规则内容面板</div>
  32.     <div class="tab-pane fade" id="forum">论坛内容面板</div>
  33.     <div class="tab-pane fade" id="security">安全内容面板</div>
  34.     <div class="tab-pane fade" id="welfare">公益内容面板</div>
  35. </div>
  36.  
  37. <!--下面是代码任务部分-->
  38.  
  39. <!-- 选项卡组件（菜单项nav-tabs）-->
  40. <ul id="myTab2" class="nav nav-tabs" role="tablist">
  41.     <li><a href="" role="tab">娱乐</a></li>
  42.     <li><a href="" role="tab">房产</a></li>
  43.     <li><a href="" role="tab">国内</a></li>
  44.     <li><a href="" role="tab">国外</a></li>    
  45. </ul>
  46. <!-- 选项卡面板 -->
  47. <div id="myTabContent2" class="tab-content">
  48. 	<div class="tab-pane fade in active" id="">娱乐内容面板</div>
  49. 	<div class="tab-pane fade" id="">房产内容面板</div>
  50. 	<div class="tab-pane fade" id="">国内内容面板</div>
  51. 	<div class="tab-pane fade" id="">国外内容面板</div>	
  52. </div>
  53.  
  54.  
  55. </body>
  56. </html>
下一节