bootstrap tabs 默認tab頁的使用方式


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
 });

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM