我正在尝试通过AJAX为Twitter-Bootstrap标签http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/加载内容实现此示例,但我需要从同一文档中的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>
提前感谢您的帮助。
答案 0 :(得分:6)
如果您只是将容器的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');
});
});