bootstrap tabs 默認tab頁的使用方式

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
 });
相關文章
相關標籤/搜索