使用Bootstrap Tabs选项卡Ajax加载数据实现

本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码，供大家参考，具体内容如下

HTML代码(仅展示了部分关键性代码)

<li class="active">
 <a href="#home" data-toggle="tab" name="menu-ctrl"> 
 <span class="glyphicon glyphicon-home">&nbsp;</span> 主页 
 <span class="sr-only">(current)</span> 
 </a>
</li>
<li>
 <a href="#test-paper"> 
 <span class="glyphicon glyphicon-list-alt">&nbsp;</span> 试卷库
 </a>
</li>
<li>
 <a href="#favorite"> 
 <span class="glyphicon glyphicon-bookmark">&nbsp;</span> 我的收藏
 </a>
</li>
<li>
 <a href="#about">
 <span class="glyphicon glyphicon-info-sign">&nbsp;</span> 关于
 </a>
</li> <!--- /. Nav tabs--->


<div id="myTabContent" class="tab-content">
 <!-- 试卷库页面 -->
 <div class="tab-pane fade" id="test-paper"></div>
 <!-- 收藏页面 -->
 <div class="tab-pane fade" id="favorite"></div>
 <!-- 关于页面 -->
 <div class="tab-pane fade" id="about"></div>
 <!-- 用户信息页面 -->
 <div class="tab-pane fade" id="user-info-page"></div>
</div> <!--- /.tab-content ---->

实现思路:

1.使用JavaScript激活tab选项卡:

$("a[href=['#about']").click(function(e){
 $(this).tab('show');
 e.preventDefault(); //阻止a标签的默认行为
});

2.使用jQuery的load()方法异步加载 tab-pane容器中的内容;

$('#about').load('pages/about.jsp');

大功告成!

那么接下来对上面的思路进行简单的封装

JavaScript代码:

/**
 * 激活tab选项卡并使用ajax异步加载内容 
* @param {Object} tabsId
* @param {Object} url
 */
function showTabs(tabsId,url) {
 $("a[href='#"+tabsId+"']").tab('show');
 var $tabContent = $('#'+tabsId);
 if($tabContent.length < 100) {
 $tabContent.load(url);
 //console.info(tabsId + ' load done!');
 }
}

//依次为每个tab导航a标签添加单击事件
$('a[href="#test-paper"]').click(function(e) {
 showTabs('test-paper','pages/test-paper.jsp');
 e.preventDefault();
});

//$('a[href=..]')...
//..
//.. 这么长的代码!!

考虑到每个a标签的绑定的都是click事件,只是参数不同而已, 可以尝试着把tabs的数据用json数组存储起来;

//准备tabs数据
var tabsData = [{
 "id" : "test-paper",
 "url" : "pages/test-paper.jsp"
},{
 "id" : "favorite",
 "url" : "pages/favorite.jsp"
},{
 "id" : "about",
 "url" : "pages/about.jsp"
},{
 "id" : "user-info-page",
 "url" : "pages/user-info.jsp"
}];

//遍历json数组,循环添加a标签click事件:
$(tabsData).each(function(){
 //console.info(this.id + "--->" + this.url);
 $("a[href='#"+this.id+"']").click(function(e) {
 showTabs(this.id,this.url);
 e.preventDefault();
 });
});

终于完成? No!实测运行中没有任何效果;这法子貌似行不通啊!原因暂时还在研究中(..)

这时我想到了jQuery的bind()函数:

bind(type,[data],fn);

//fn: 绑定到每个匹配元素的事件上面的处理函数
//可以尝试把每个tab的参数通过data传递到外部的function中,用作每个a标签的click响应函数

改写后的$.each()循环:

$(tabsData).each(function(){
 //console.info(this.id + "--->" + this.url);
 $("a[href='#"+this.id+"']").bind('click',{
 id : this.id,
 url : this.url
 },tabsHandler);
});
function tabsHandler(event) {
 var data = event.data;
 showTabs(data.id,data.url);
 return false; //阻止默认a标签响应
}

这次总算是成功了!

看下演示图:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap # Tabs # 选项卡 # Ajax # bootstrap选项卡扩展功能详解 # 简单实现bootstrap选项卡效果 # bootstrap选项卡使用方法解析 # bootstrap导航、选项卡实现代码 # Bootstrap选项卡动态切换效果 # BootStrap tab选项卡使用小结 # 精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局) # 很棒的Bootstrap选项卡切换效果 # 全面解析Bootstrap中tab（选项卡）的使用方法 # bootstrap实现tab选项卡切换 # 加载 # 绑定 # 都是 # 我想 # 还在 # 没有任何 # 遍历 # 大功告成 # 考虑到 # 大家分享 # 具体内容 # 单击 # 大家多多 # 依次为 # 展示了 # sr # nbsp # current # test

返回目录在线咨询

上一篇：如何递归构建字典中的完整路径字段
下一篇：简易图表制作网站有哪些,pptx创建图表有哪两种方法？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

使用Bootstrap Tabs选项卡Ajax加载数据实现

您的项目需求