小编Dan*_*o_D的帖子

Twitter-Bootstrap选项卡通过AJAX加载容器内容

我正在尝试为Twitter-Bootstrap选项卡实现这个示例http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/通过AJAX加载内容,但我需要从同一文档中的div容器加载内容,而不是加载多个文档.我正在使用的代码如下:

jQuery的

$(function() {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function(e) {    
        var contentID  = $(e.target).attr("data-target");
        var contentURL = $(e.target).attr("href");
        if (typeof(contentURL) != 'undefined')
            $(contentID).load(contentURL, function(){ $("#MainTabs").tab(); });
        else
            $(contentID).tab('show');
        });
    $('#MainTabs div[data-target="#tabone"]').tab("show");
});
Run Code Online (Sandbox Code Playgroud)

HTML

<ul id="MainTabs" class="nav nav-tabs">
    <li><div data-target="#tabone" data-toggle="tab">tab One</div></li>
    <li><div data-target="#tabtwo" data-toggle="tab" href="/test.html">Tab Two</div></li>
    <li><div data-target="#tabthree" data-toggle="tab" href="/test2.html">Tab Three</div></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="tabone">Content Tab One</div>
    <div class="tab-pane" id="tabtwo">Loading...</div>
    <div class="tab-pane" id="tabthree">Loading...</div>
</div>
Run Code Online (Sandbox Code Playgroud)

预先感谢您的任何帮助.

ajax jquery twitter-bootstrap

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

ajax ×1

jquery ×1

twitter-bootstrap ×1