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

您应select the tab回调中的.load()：

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

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

        });
    });
});

Bootstrap在Inactive选项卡中加载AJAX内容

1 个答案: