引导程序在“非活动"选项卡中加载AJAX内容 [英] Bootstrap load AJAX content in Inactive Tab

问题描述

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

I'm building a site utilising Bootstrap tabs and AJAX. I've set it up so that when a link with the class of .load is clicked the content of that html document is loaded into the active tab, in this case #tab2.

这可以通过以下操作完成:

This is done using the following:

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

我还需要#tab2 中的某些链接，这些链接的类为 .load-tab1 ，以便将内容加载到#tab1 中，我已经用下面的代码实现了.

I also need some links in #tab2, those with the class of .load-tab1 to load content into #tab1, which I have achieved with the following code.

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

问题是我不知道如何制作它，因此，当单击 .load-tab1 链接时，活动选项卡也从#tab2 切换为#tab1 .

The problem is I can't work out how to make it so that when .load-tab1 links are clicked the active tab is also switched from #tab2 to #tab1.

任何帮助将不胜感激！

更新:

我能够通过以下代码使用它，但仍然认为有更好的解决方案.

I was able to get it working with the following code but still thinking there is a better solution.

 $(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");
    });
});

推荐答案

您应选择标签在 .load() 回调中:

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

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

        });
    });
});

这篇关于引导程序在“非活动"选项卡中加载AJAX内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！