0

我正在尝试实现此代码： http ://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/

它在功能上添加了 ajax 加载，我使用的是 Twitter Bootstrap，它没有内置此功能。

一切正常，但似乎每隔一次你按下一个标签，内容就不会加载。所以我可以按“联系”，这很好。但是，当我按“联系日志”时，选项卡会更改以指示我现在在联系日志上，但内容没有加载（最后一个选项卡中的内容仍然存在）。如果我然后按下下一个选项卡，内容将正确加载。

我已经检查过了，似乎第二次通过加载函数没有返回任何内容，我只是得到一个空对象。

$(document).ready(function () {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function (e) {
        e.preventDefault();
        console.log(e);
        var contentID = $(e.target).attr("data-target");
        var contentURL = $(e.target).attr("href");
        if (typeof (contentURL) != "undefined") {
            console.log(contentID);
            console.log(contentURL);
            console.log($(contentID).load(contentURL));
            $(contentID).load(contentURL, function () {
                $("#MainTabs").tab();
            });
        } else {
            $(contentID).tab("show");
        }
    });
    $("#MainTabs a:first").tab("show");
});



<div class="span12">
<ul id="MainTabs" class="nav nav-tabs">
    <li><a data-target="#general" data-toggle="tab" title="General">General</a></li>
    <li><a data-target="#contacts" data-toggle="tab" href="/manager/contacts/VkdVPQ==/network_partner" title="Contacts">Contacts</a></li>
    <li><a data-target="#contactLog" data-toggle="tab" href="/manager/contactLog/VldRPQ==/network_partner" title="Contact Log">Contact Log</a></li>
    <li><a data-target="#prohibitiveAdvertising" data-toggle="tab" href="/manager/prohibitiveAdvertising/QURFPQ==" title="Contact Log">Prohibitive Advertising</a></li>
    <li><a data-target="#placements" data-toggle="tab" href="/manager/placements/VkdVPQ==" title="Placements">Placements</a></li>
    <li><a data-target="#actionPoints" data-toggle="tab" href="/manager/actionPoints/Q0RrPQ==" title="Action Points">Action Points</a></li>
    <li><a data-target="#repository" data-toggle="tab" href="/manager/repository/QVRBPQ==" title="Repository">Repository</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="general">                                                                                                                                                                                                                                                                          
</div>
<div class="tab-pane" id="contacts">
</div>
<div class="tab-pane" id="contactsLog">
</div>
<div class="tab-pane" id="prohibitiveAdvertising">
</div>    
<div class="tab-pane" id="placement">  
</div>
<div class="tab-pane" id="actionPoints">    
</div>
<div class="tab-pane"id="repository">
</div>
</div>

我使用console.lo 来检查contactID 和ContactURL 的内容，每次单击选项卡时，它们总是会按照我的预期返回。

4

1 回答 1

2

检查Bootply 上的这个工作示例是否对您有帮助

于 2013-06-14T15:28:31.487 回答