我正在尝试使用 Ajax 加载给定选项卡的内容。
我在服务器上呈现的第一个选项卡处于事件状态,其他我使用 Ajax 激活和加载。
我已经隔离了问题(没有 Ajax)here .
HTML:
<h1>Hello, tabs!</h1>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
</li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
</div>
</div>
Javascript:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.preventDefault();
var ref = $(this).attr('href').replace('#', '');
var html = '<div role="tabpanel" class="tab-pane" id="' + ref + '">Brace yourself SW7 is coming. ' + ref + '</div>';
var tabContent = $('.tab-content');
if (!tabContent.find('.tab-pane#' + ref).length) {
tabContent.append(html);
}
tabContent.find('.tab-pane#' + ref).tab('show');
});
“主页”选项卡呈现为已激活。 例如,单击“配置文件”选项卡,它将附加内容但不会激活该选项卡。现在,如果您再次单击“主页”选项卡并单击“个人资料”选项卡,它将正常工作。
我做错了什么或者这是“预期”行为?
最佳答案
问题是第一次单击选项卡时内容 DIV 不存在,因此当 Bootstrap 代码执行时它找不到需要激活的 DIV。第二次单击时,DIV 存在,因此 Bootstrap 找到了它。您可以通过在脚本末尾隐藏所有选项卡内容 DIV,然后显示指定的 DIV 来解决这个问题。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.preventDefault();
var ref = $(this).attr('href').replace('#', '');
var tabContent = $('.tab-content');
if (!$('#' + ref).length) {
// Execute the AJAX here to get the tab content
var html = '<div role="tabpanel" class="tab-pane" id="' + ref + '">Brace yourself SW7 is coming. ' + ref + '</div>';
tabContent.append(html);
}
tabContent.find('.tab-pane').hide();
tabContent.find('#' + ref).show();
});
我相信这可以进一步优化,但我现在没时间了,这行得通......
关于javascript - 显示使用 Ajax 加载的 Bootstrap 选项卡在第一次单击时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33436628/