0

我正在使用 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");
    });
});
4

1 回答 1

0

您应该在回调中选择选项卡:.load()

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

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

        });
    });
});
于 2013-05-25T11:48:42.607 回答