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

Question

我试图通过AJAX加载内容的Twitter-Bootstrap选项卡实现此示例，但我需要从同一文档中的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"); 
}); 

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> 

预先感谢您的任何帮助。

Answer 1

如果您只是将容器的id传递到href，那应该是默认行为。

<li><div data-target="#tabone" data-toggle="tab" href="#loadedcontent">tab One</div></li> 

.... 

<div id="loadedcontent">My content</div> 

既然你有一个特殊情况，你想通过AJAX调用来加载页面的特定容器。你可以做这样的事情。

HTML

<li><div id="specialTab" data-target="#tabone" data-toggle="tab" href="/ajax.html">tab one</div></li> 

JS

$('#specialTab').click(function(e) { 
    e.preventDefault(); 
    var containerId = '#content'; /** Specify which element container */ 
    var self = $(this); 
    var url = self.attr('href'); 
    $(self.data('target')) 
     .load(url +' '+ containerId, function(){ 
      self.tab('show'); 
     }); 
});