Bootstrap tab页的动态ajax加载

要实现这样的功能，点击tab导航ajax动态加载页面，当加载过之后，点击则不再重新加载，直接显示原来加载的页面。

tab页面代码：

<!--Navtabs-->

<ulclass="navnav-tabs"role="tablist"id="maintab">

<liclass="active"><ahref="#tab1"onclick='showPage("tab1","tab1.php")'>tab1</a></li>

<li><ahref="#tab2"onclick='showPage("tab2","tab2.php")'>tab2</a></li>

<li><ahref="#tab3"onclick='showPage("tab3","tab3.php")'>tab3</a></li>

<li><ahref="#tab4"onclick='showPage("tab4","tab4.php")'>tab4</a></li>

</ul>

<!--Tabpanes-->

<divclass="tab-content">

<divclass="tab-paneactive"id="tab1"></div>

<divclass="tab-pane"id="tab2"></div>

<divclass="tab-pane"id="tab3"></div>

<divclass="tab-pane"id="tab4"></div>

</div>

javascript:

<scriptlanguage="javascript">

varloadimg="./img/load2.gif";//加载时的loading图片

functionshowPage(tabId,url){

$('#maintaba[href="#'+tabId+'"]').tab('show');//显示点击的tab页面

if($('#'+tabId).html().length<20){//当tab页面内容小于20个字节时ajax加载新页面

$('#'+tabId).html('<br>'+loadimg+'页面加载中，请稍后...');//设置页面加载时的loading图片

$('#'+tabId).load(url);//ajax加载页面

}

}

</script>