3-1 选项卡（Tabs）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

选项卡（Tabs）

插件源文件：tab.js

插件引用地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tab.js"></script>

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。如下图所示：

默认显示“公告”对应的内容，当用户鼠标悬浮在“规则”菜单项时，显示对应规则的内容：

依此类推，通过这个效果可以得知，Bootstrap框架中的选项卡主要有两部分内容组成：

任务

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选项卡（Tabs）</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. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  29. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  30. </body>
  31. </html>
  1. body{padding:10px;}
下一节