0

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");
    });
});
Mischa Colley
  • 123
  • 3
  • 13
  • You don't need to do all the class toggling manually, the `$.tab('show')` method of Bootstrap plugin will do. – moonwave99 May 25 '13 at 12:42

1 Answers1

0

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');

        });
    });
});
moonwave99
  • 21,957
  • 3
  • 43
  • 64