選項卡（Tabs）
插件源文件：tab.js
插件引用地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tab.js"></script>
選項卡Tabs是Web中一種非常常用的功能。用戶點擊或懸浮對應的菜單項，能切換出對應的內(nèi)容。如下圖所示：
默認顯示“公告”對應的內(nèi)容，當用戶鼠標懸浮在“規(guī)則”菜單項時，顯示對應規(guī)則的內(nèi)容：
依此類推，通過這個效果可以得知，Bootstrap框架中的選項卡主要有兩部分內(nèi)容組成：
- 選項卡組件（也就是菜單組件），對應的是 Bootstrap的 nav-tabs）
- 底部可以切換的選項卡面板，在 Bootstrap 中通常 tab-pane 來表示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>選項卡（Tabs）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 選項卡組件（菜單項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">規(guī)則</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 active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane" id="security">安全內(nèi)容面板</div>
<div class="tab-pane" id="welfare">公益內(nèi)容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
body{padding:10px;}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
