Twitter-Bootstrap 选项卡通过 AJAX 加载容器内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14719747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter-Bootstrap tabs load container content via AJAX
提问by Dano_D
I'm trying to implement this example for Twitter-Bootstrap tabs http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/loading content via AJAX, but I need to load the content from a div container within the same document, rather than loading multiple documents. The code I'm using is as follows:
我正在尝试为 Twitter-Bootstrap 选项卡实现此示例http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/通过 AJAX 加载内容，但我需要从同一文档中的 div 容器加载内容，而不是加载多个文档。我使用的代码如下：
jQuery
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
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>
Thank you in advance for any help.
预先感谢您的任何帮助。
回答by Dennis Rongo
That should be the default behavior if you just pass in the idof the container to the href.
如果您只是将id容器的 传递给href.
<li><div data-target="#tabone" data-toggle="tab" href="#loadedcontent">tab One</div></li>
....
<div id="loadedcontent">My content</div>
Since you have a special case where you want to load a specific container of the page through an AJAX call. You can do something like this.
由于您有一个特殊情况，您希望通过 AJAX 调用加载页面的特定容器。你可以做这样的事情。
HTML
HTML
<li><div id="specialTab" data-target="#tabone" data-toggle="tab" href="/ajax.html">tab one</div></li>
JS
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');
});
});
