Bootstrap 在非活动选项卡中加载 AJAX 内容

Question

我正在使用 Bootstrap 选项卡和 AJAX 构建一个站点。我已经进行了设置，以便当单击带有.load 类的链接时，该html 文档的内容被加载到活动选项卡中，在本例中为#tab2。

这是通过以下方式完成的：

 $(function(){
    $("#tab2").delegate('.load', 'click', function (e) { 
        e.preventDefault();
        $("#tab2").load($(this).attr("href"));
    });
});

我还需要#tab2 中的一些链接，那些具有.load-tab1 类的链接将内容加载到#tab1，这是我用以下代码实现的。

 $(function(){
    $("#tab2").delegate('.load-tab1', 'click', function (e) { 
        e.preventDefault();
        $("#tab1").load($(this).attr("href"));
    });
});

问题是我不知道怎么做，这样当点击.load-tab1链接时，活动标签也会从#tab2切换到#tab1。

任何帮助将不胜感激！

更新：

我能够使用以下代码使其工作，但仍然认为有更好的解决方案。

 $(function(){
    $("#tab2").delegate('.load-tab1', 'click', function (e) { 
        e.preventDefault();
        $("#tab1").load($(this).attr("href"));
        $(".tab2").removeClass("active");
        $(".tab1").addClass("active");
        $(".tab-content #tab2").removeClass("active");
        $(".tab-content #tab1").addClass("active");
    });
});

Answer 1

你应该在.load()回调中select the tab：

 $(function(){
    $("#tab2").delegate('.load-tab1', 'click', function (e) { 
        e.preventDefault();
        $("#tab1").load($(this).attr("href"), function(response, status, xhr){

          $( theFirstTabAnchorSelector ).tab('show');

        });
    });
});