显示使用Ajax加载的引导选项卡;我第一次不工作's已单击

Show Bootstrap tab loaded using Ajax doesn't work the first time it's clicked

本文关键字：第一次 工作 单击 Ajax 加载 选项 显示      更新时间：2023-09-26

我正在尝试使用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');
相关文章：