選項(xiàng)卡--JavaScript觸發(fā)方法
除了在HTML設(shè)置 data-toggle 來觸發(fā)選項(xiàng)卡之外，還可以通過JavaScript直接調(diào)用。
調(diào)用方法:
在每個(gè)鏈接的單擊事件中調(diào)用tab("show")方法，顯示對(duì)應(yīng)的標(biāo)簽面板內(nèi)容。針對(duì)上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用：
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
任務(wù)
我來試試：用JS的方法觸發(fā)Tab切換效果。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>選項(xiàng)卡--JavaScript觸發(fā)方法</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<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>
<script>
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
</script>
</head>
<body>
<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
<li><a href="#rule" role="tab" >規(guī)則</a></li>
<li><a href="#forum" role="tab" >論壇</a></li>
<li><a href="#security" role="tab" >安全</a></li>
<li><a href="#welfare" role="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ù)部分-->
<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
<li><a href="" role="tab">娛樂</a></li>
<li><a href="" role="tab">房產(chǎn)</a></li>
<li><a href="" role="tab">國內(nèi)</a></li>
<li><a href="" role="tab">國外</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="">娛樂內(nèi)容面板</div>
<div class="tab-pane fade" id="">房產(chǎn)內(nèi)容面板</div>
<div class="tab-pane fade" id="">國內(nèi)內(nèi)容面板</div>
<div class="tab-pane fade" id="">國外內(nèi)容面板</div>
</div>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
