3-3 选项卡--触发切换效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

选项卡--触发切换效果

同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：
  1、选项卡导航链接中要设置 data-toggle="tab"

  2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

     如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"

     主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

  3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

代码如下所示：

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

运行效果如下：

 

任务

我来试试：制作一个选项卡

补充右侧代码编辑器代码来完成一个可以触发切换的选项卡。

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