Bootstrap load AJAX content in Inactive Tab

问题

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

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

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.

Any help would be greatly appreciated!

UPDATE:

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

回答1:

You should select the tab in the .load() callback:

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

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

        });
    });
});

来源：https://stackoverflow.com/questions/16749144/bootstrap-load-ajax-content-in-inactive-tab