javascript - 显示使用 Ajax 加载的 Bootstrap 选项卡在第一次单击时不起作用

Question

我正在尝试使用 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');
});

“主页”选项卡呈现为已激活。例如，单击“配置文件”选项卡，它将附加内容但不会激活该选项卡。现在，如果您再次单击“主页”选项卡并单击“个人资料”选项卡，它将正常工作。

我做错了什么或者这是“预期”行为？

Answer 1

问题是第一次单击选项卡时内容 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();
});

我相信这可以进一步优化，但我现在没时间了，这行得通......