I have several tabs and sub tabs underneath #tab1.

<ul id=main-nav-tabs class=nav nav-tabs style=margin-top: 5px;>

    <li id=tab1><a href=#tab1-tab data-toggle=tab></a></li>

    <li class=active id=tab2><a href=#tab2-tab data-toggle=tab></a></li>

    <li id=tab3><a href=#tab3-tab data-toggle=tab></a></li>



</ul>





<div id=tab-content class=tab-content>

    <div id=tab1-tab class=tab-pane fade scrollable>

        <ul class=nav nav-pills> 

            <li class=active><a href=#first-subtab data-toggle=tab></a></li>

            <li><a href=#second-subtab data-toggle=tab></a></li>

            <li><a href=#third-subtab data-toggle=tab></a></li>

        </ul>

    <div id=subtab-container>

        <div id=subtab-tab-content class=tab-content>

            <div id=first-subtab class=tab-pane in active fade></div>

            <div id=second-subtab class=tab-pane fade></div>

            <div id=third-subtab class=tab-pane fade></div>

        </div>

    </div>

</div>  



<div id=tab2 class=tab-pane in active fade>

    <table id=table2 class=table table-condensed></table>

</div>          

<div id=tab3 class=tab-pane fade>

    <table id=table3 class=table table-condensed></table>

</div>

Right now, I have a couple sets of data, when you select one set, it loads all the tabs with data. When you select another set, it updates all the tabs with the new data.

When it loads, I have #Tab2 as the main default active tab. When I click #tab1, I want #first-subtab to be the default active tab, but it always goes back to the last sub tab clicked from the last set of data.

For example, I load data, it defaults to #tab2, and I click #tab1 -> third-sub tab. When I load another set it defaults to #tab2, I click #tab1-> INSTEAD OF GOING TO #first-subtab, IT GOES TO #third-subtab because I clicked it last.

I've tried to set the #first-subtab to default with the following:

$('#tab1').click(function(){

    $('#third-tab').removeClass('li.active');

    $('#first-tab').addClass('li.active');             

});

I've also tried to show/hide accordingly, but nothing will force the #first-subtab to be default... Any suggestions?

My complete html is 197 lines. When I use the google developer tools, and I've clicked on #first-subtab, the one that I want to be active, it's under the following:

html -> body -> div.layout.layout-vertical -> div#views.visible
 -> div#table-container.fill -> div#tab-content.tab-content
 -> div#tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a