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

发布时间：2020-12-15 23:22:12 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码，供大家参考，具体内容如下 HTML代码(仅展示了部分关键性代码) 试卷库我的收藏关于 div id="myTabContent" class="tab-content" div class="tab-pane fade" id="test-paper" div class="t

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

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

试卷库

我的收藏

关于

实现思路:

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

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

大功告成!

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

JavaScript代码:

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

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

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

//遍历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()函数:

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

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

" + 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标签响应 }

这次总算是成功了!

看下演示图:

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!