HTML中引入tabs以下:javascript
<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中使用方式:html
/*選擇性加載頁面,初始加載頁面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 });