選項(xiàng)卡--為選擇卡添加fade樣式
為了讓面板的隱藏與顯示在切換的過(guò)程效果更流暢，可以在面板中添加類名 fade，讓其產(chǎn)生漸入的效果。
在添加 fade 樣式時(shí)，最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上 in 類名，不然其內(nèi)容用戶無(wú)法看到。如下面的示例所示。
<!-- 選項(xiàng)卡組件（菜單項(xiàng)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>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
任務(wù)
我來(lái)試試：為右側(cè)選項(xiàng)卡添加fade樣式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>聲明式觸發(fā)選項(xiàng)卡（添加fade樣式）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 選項(xiàng)卡組件（菜單項(xiàng)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>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<br />
<br />
<!--下面是代碼任務(wù)部分-->
<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
<li><a href="#fun" role="tab" data-toggle="tab">娛樂(lè)</a></li>
<li><a href="#house" role="tab" data-toggle="tab">房產(chǎn)</a></li>
<li><a href="#internal" role="tab" data-toggle="tab">國(guó)內(nèi)</a></li>
<li><a href="#external" role="tab" data-toggle="tab">國(guó)外</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane active" id="fun">娛樂(lè)內(nèi)容面板</div>
<div class="tab-pane" id="house">房產(chǎn)內(nèi)容面板</div>
<div class="tab-pane" id="internal">國(guó)內(nèi)內(nèi)容面板</div>
<div class="tab-pane" id="external">國(guó)外內(nèi)容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
body{padding:10px;}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
