引导选项卡 - 首先加载 ajax 内容然后切换选项卡答案

【问题标题】：Bootstrap tabs - load ajax content first THEN switch tabs引导选项卡 - 首先加载 ajax 内容然后切换选项卡
【发布时间】：2014-10-13 13:04:57
【问题描述】：

在使用 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 给了我一个 url，这还不够好..

【问题讨论】：

标签： ajax asp.net-mvc twitter-bootstrap tabs

【解决方案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 很重要，否则它将不起作用。

【讨论】：