使用Bootstrap Tabs选项卡Ajax加载数据实现_网络技术

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

发布时间 - 2026-01-10 22:03:33 点击率：次

本文实例为大家分享了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

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：css文字颜色无法修改怎么办_使用color属性覆盖默认样式

下一篇：Laravel中间件用途？中间件怎样创建注册？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：css文字颜色无法修改怎么办_使用color属性覆盖默认样式

下一篇：Laravel中间件用途？中间件怎样创建注册？