首页 > 代码库 > Bootstrap tab页的动态ajax加载
Bootstrap tab页的动态ajax加载
要实现这样的功能,点击tab导航ajax动态加载页面,当加载过之后,点击则不再重新加载,直接显示原来加载的页面。
tab页面代码:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="maintab">
<li class="active"><a href="http://www.mamicode.com/#tab1" onclick=‘showPage("tab1","tab1.php")‘>tab1</a></li>
<li><a href="http://www.mamicode.com/#tab2" onclick=‘showPage("tab2","tab2.php")‘>tab2</a></li>
<li><a href="http://www.mamicode.com/#tab3" onclick=‘showPage("tab3","tab3.php")‘>tab3</a></li>
<li><a href="http://www.mamicode.com/#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="http://www.mamicode.com/#‘+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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。