このコードを実装しようとしています: 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 を確認しましたが、これらはタブをクリックするたびに期待どおりに返されます。