要实现这样的功能,点击tab导航ajax动态加载页面,当加载过之后,点击则不再重新加载,直接显示原来加载的页面。
tab页面代码:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="maintab">
<li class="active"><a href="#tab1" οnclick='showPage("tab1","tab1.php")'>tab1</a></li>
<li><a href="#tab2" οnclick='showPage("tab2","tab2.php")'>tab2</a></li>
<li><a href="#tab3" οnclick='showPage("tab3","tab3.php")'>tab3</a></li>
<li><a href="#tab4" οnclick='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>
Bootstrap tab页的动态ajax加载
原创mb5c80f4c73b73a 博主文章分类:ajax/web相关 ©著作权
©著作权归作者所有:来自51CTO博客作者mb5c80f4c73b73a的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:pidstat监控工具小结
下一篇:mybatis 3中获得自增主键
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
SpringBoot 动态加载 jar 包,动态配置方案
SpringBoot 动态加载 jar 包,动态配置方案
java spring 加载 -
VUE动态加载不同组件
VUE动态加载不同组件
用户登录 属性值 加载 -
Bootstrap 标签页(Tab)插件
标签页(Tab)在一章中介绍过。通过结合一些 data 属性,您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
bootstrap javascript 前端 标签页 iOS -
Angular 实现动态加载 Tab 标签
通过介绍两种方式来实现动态加载 Tab 标签的效果。1. 方式一:利用 Angular 动态加载组件实现效果图:原理:Angular 中动态加载组件
Angular 动态添加tab Dynamic Tab 动态加载