title: Forcing bootstrap tab to be active
body: <p>I have several tabs and sub tabs underneath <strong><em><code>#tab1</code></em></strong>.</p>
  
  <pre><code>&lt;ul id="main-nav-tabs" class="nav nav-tabs" style="margin-top: 5px;"&gt;
      &lt;li id="tab1"&gt;&lt;a href="#tab1-tab" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="active" id="tab2"&gt;&lt;a href="#tab2-tab" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tab3"&gt;&lt;a href="#tab3-tab" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  &lt;div id="tab-content" class="tab-content"&gt;
      &lt;div id="tab1-tab" class="tab-pane fade scrollable"&gt;
          &lt;ul class="nav nav-pills"&gt; 
              &lt;li class="active"&gt;&lt;a href="#first-subtab" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#second-subtab" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#third-subtab" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;div id="subtab-container"&gt;
          &lt;div id="subtab-tab-content" class="tab-content"&gt;
              &lt;div id="first-subtab" class="tab-pane in active fade"&gt;&lt;/div&gt;
              &lt;div id="second-subtab" class="tab-pane fade"&gt;&lt;/div&gt;
              &lt;div id="third-subtab" class="tab-pane fade"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div id="tab2" class="tab-pane in active fade"&gt;
      &lt;table id="table2" class="table table-condensed"&gt;&lt;/table&gt;
  &lt;/div&gt;          
  &lt;div id="tab3" class="tab-pane fade"&gt;
      &lt;table id="table3" class="table table-condensed"&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>When it loads, I have <code>#Tab2</code> as the main default active tab. When I click <code>#tab1</code>, I want <code>#first-subtab</code> to be the default active tab, but it always goes back to the last sub tab clicked from the last set of data. </p>
  
  <p><em>For example, I load data, it defaults to <code>#tab2</code>, and I click <code>#tab1</code> -> third-sub tab. When I load another set it defaults to <code>#tab2</code>, I click <code>#tab1</code>-></em> <strong><em>INSTEAD OF GOING TO <code>#first-subtab</code>, IT GOES TO <code>#third-subtab</code></em></strong> <em>because I clicked it last.</em></p>
  
  <p>I've tried to set the <code>#first-subtab</code> to default with the following: </p>
  
  <pre><code>$('#tab1').click(function(){
      $('#third-tab').removeClass('li.active');
      $('#first-tab').addClass('li.active');             
  });
  </code></pre>
  
  <p>I've also tried to show/hide accordingly, but nothing will force the <code>#first-subtab</code> to be default... Any suggestions?</p>
  
  <p>My complete html is 197 lines. When I use the google developer tools, and I've clicked on <code>#first-subtab</code>, the one that I want to be active, it's under the following: </p>
  
  <pre>
  html -> body -> div.layout.layout-vertical -> div#views.visible<br> -> div#table-container.fill -> div#tab-content.tab-content<br> -> div#tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a
  </pre>