Bootstrap tab頁的動態ajax載入

標籤：ajax   bootstrap   tab   

要實現這樣的功能，點擊tab導航ajax動態載入頁面，當載入過之後，點擊則不再重新載入，直接顯示原來載入的頁面。

tab頁面代碼：

<!-- 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"; // 載入時的loading圖片

function showPage(tabId, url){
$(‘#maintab a[href="#‘+tabId+‘"]‘).tab(‘show‘); // 顯示點擊的tab頁面
if($(‘#‘+tabId).html().length<20){ // 當tab頁面內容小於20個位元組時ajax載入新頁面
$(‘#‘+tabId).html(‘<br>‘+loadimg+‘ 頁面載入中，請稍後...‘); // 設定頁面載入時的loading圖片
$(‘#‘+tabId).load(url); // ajax載入頁面
}
}

</script>

本文出自 “小何貝貝的技術空間” 部落格，請務必保留此出處http://babyhe.blog.51cto.com/1104064/1539694