Question

我正在尝试实现此代码： 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是什么，并且每次点击标签时都会看到这些内容。

Answer 1

检查this working example on Bootply是否可以帮助您

Jquery Load函数每隔一段时间才有效

1 个答案: