HTML中引入tabs如下:
<ul class="nav">
<li><a href="#a" tt="A.html" data-toggle="tab">頁面A</a></li>
<li><a href="#b" tt="B.html" data-toggle="tab">頁面B</a></li>
<li><a href="#c" tt="C.html" data-toggle="tab">頁面C</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="a"></div>
<div class="tab-pane" id="b"></div>
<div class="tab-pane" id="c"></div>
</div>
js中使用方式:
/*選擇性加載頁面,初始加載頁面A*/
$(function() {
$(".nav li").click(function () {
var _a = $(this).find("a");
if($(_a.attr("href")).html()==""){ //判斷頁面是否已加載
$(_a.attr("href")).addClass("active").siblings().removeClass("active");
//tab頁點擊事件對應的頁面元素置為"active"樣式,其他兄弟頁面移除"active"樣式
$(_a.attr("href")).load(_a.attr("tt"));
//加載樣式為"active"的頁面
}
});
$(".nav.nav-tabs li").get(0).click(); //默認選擇加載第一個頁面A
});
