使用Bootstrap Tabs选项卡Ajax加载数据的实现以及遇到的问题;

最新推荐文章于 2025-05-31 12:07:01 发布

原创最新推荐文章于 2025-05-31 12:07:01 发布 · 1.8w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #ajax #html #jsp

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

这篇博客讲述了如何在Bootstrap的Tabs组件中利用Ajax异步加载数据，通过JavaScript和jQuery实现点击Tab时动态加载内容。作者分享了实现思路，包括使用JavaScript激活选项卡和jQuery的load()方法，并提供了封装后的代码示例，最后展示了成功的演示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博客搬家了, 新地址 [ http://wuwz.org ]，是时候换上HEXO了

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