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