显示使用Ajax加载的引导选项卡;我第一次不工作's已单击
Show Bootstrap tab loaded using Ajax doesn't work the first time it's clicked
我正在尝试使用Ajax加载给定选项卡的内容。
我在服务器上呈现的第一个选项卡是活动的,其他选项卡是使用Ajax激活和加载的。
我在这里隔离了这个问题(没有Ajax)。
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();
});
我相信这可以进一步优化,但我现在没有时间,这很有效。。。
正如您所说,发生的事情如下:
- ajax请求被创建,选项卡的点击处理程序也被触发
- 处理程序是在没有要显示的目标内容时执行的,但它将"active"类添加到了"li"元素中
- 当ajax请求完成时,我执行了"tab('sow')"代码,但由于"li"选项卡已经激活,事件没有得到正确处理
所说的行是这样的:https://github.com/twbs/bootstrap/blob/master/dist/js/bootstrap.js#L2081
在执行选项卡显示之前添加removeClass有效:
el.parent().removeClass('active');
el.tab('show');
其中el是"a"元素。
我只解决了
$('#mydivid').addClass('show');
相关文章:
- Javascript:JSON请求仅在第一次工作
- 让jqGrid第一次工作
- show-hide只在ajax调用中第一次工作
- $(this) .prop() 只在第一次工作
- 复选框选择/取消选择触发器第一次工作,但在随后的尝试中失败
- 光滑的滑块只在Jquery Mobile中第一次工作
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- NG-CLICK功能仅在第一次工作
- jQuery Animation只是第一次工作
- jquery .load() 函数仅在第一次工作
- 加载ajax的Javascript只能在第一次工作
- 我的node.js http请求第一次工作,现在它显示了一些错误
- Jquery ajax调用只在第一次工作
- 在jquery 1.3.2中反复工作的Ajax只在1.7.1中第一次工作
- 对象搜索只在第一次工作
- addEventListener只在第一次工作
- 动画只在第一次工作
- AngularJS和Fullcalendar: eventClick只在第一次工作
- 无法调用$stateProvider两次来更新视图(它只在第一次工作)
- 调用js函数只能在jquery手机上第一次工作