Question

在使用ajax加载内容时，我遇到了延迟标签更改的麻烦。

如果我位于标签0并单击标签1，我希望使用ajax加载内容，并在完成后切换标签。

此刻标签即时更改，这样会在我的ajax内容加载之前留空。

HTML：

<ul class="nav nav-tabs" id="tab" role="tablist">
    <li class="active"><a data-toggle="tab" id="tab1" href="#container1">Information</a></li>
    <li><a data-toggle="tab" id="tab2" href="#container2">Users</a></li>
</ul>

<div class="tab-content">
    @*TAB1*@
    <div class="tab-pane active" id="container1">
        @Html.Partial("_StaticContentFromView")
    </div>

    @*TAB2*@
    <div class="tab-pane" id="container2">
    </div>
</div>

JS：

$('#tab2').click(function () {
            $.ajax({
                url: '/Home/Test',
                type: 'GET',
                dataType: 'html',
                success: function (data) {
                    $('#container2').html(data);
                }
            });
        });

更新1：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

此事件在标签更改之前触发，因此我可以在此处加载内容。但是，每次更改选项卡时都会调用此事件。如何查看选择哪个选项卡？ e.target给了我一个网址，这还不够好。

Answer 1

好吧找到了办法..

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    var tabName = $(e.target).text(); //Get the name of the tab.

    if (tabName == 'Users') {
            $.ajax({
            url: '/Home/Test',
            type: 'GET',
            async: false,
            dataType: 'html',
            success: function (data) {
                $('#container2').html(data);
                e.target // activated tab
                e.relatedTarget // previous tab
            }
        });
    }
})

将async设置为false非常重要，否则无法正常工作。

Bootstrap选项卡 - 首先加载ajax内容然后切换选项卡

1 个答案: