要實(shí)現(xiàn)這樣的功能,點(diǎn)擊tab導(dǎo)航ajax動(dòng)態(tài)加載頁(yè)面,當(dāng)加載過之后,點(diǎn)擊則不再重新加載,直接顯示原來加載的頁(yè)面。
tab頁(yè)面代碼:
<!-- Nav tabs --><ul class="nav nav-tabs" role="tablist" id="maintab"> <li class="active"><a href="#tab1" onclick='showPage("tab1","tab1.php")'>tab1</a></li> <li><a href="#tab2" onclick='showPage("tab2","tab2.php")'>tab2</a></li> <li><a href="#tab3" onclick='showPage("tab3","tab3.php")'>tab3</a></li> <li><a href="#tab4" onclick='showPage("tab4","tab4.php")'>tab4</a></li></ul><!-- Tab panes --><div class="tab-content"> <div class="tab-pane active" id="tab1"></div> <div class="tab-pane" id="tab2"></div> <div class="tab-pane" id="tab3"></div> <div class="tab-pane" id="tab4"></div></div>
javascript:
<script language="javascript"> var loadimg="./img/load2.gif"; // 加載時(shí)的loading圖片 function showPage(tabId, url){ $('#maintab a[href="#'+tabId+'"]').tab('show'); // 顯示點(diǎn)擊的tab頁(yè)面 if($('#'+tabId).html().length<20){ // 當(dāng)tab頁(yè)面內(nèi)容小于20個(gè)字節(jié)時(shí)ajax加載新頁(yè)面 $('#'+tabId).html('<br>'+loadimg+' 頁(yè)面加載中,請(qǐng)稍后...'); // 設(shè)置頁(yè)面加載時(shí)的loading圖片 $('#'+tabId).load(url); // ajax加載頁(yè)面 } }</script>
聯(lián)系客服