title: Reset Active Child in Twitter Bootstrap Nested Tabs
body: <p>The project calls for 3 parent tabs (P), each containing a set of 3 child tabs (c). </p>
  
  <p>The problem: when user exits at P1c3, navigating to another parent set, then goes back to P1, c3 is still active. Does anyone know how to reset the default active child to c1 when P1 is opened?</p>
  
  <p>Basic structure, nothing out of the ordinary. </p>
  
  <pre><code>&lt;div class="tabbable"&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li&gt;&lt;a href="#P1" data-toggle="tab"&gt;P1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#P2" data-toggle="tab"&gt;P2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#P3" data-toggle="tab"&gt;P3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;div class="tab-content tab-container"&gt;
  
    &lt;div class="tab-pane" id="P1"&gt;
        &lt;div class="tabbable tabs-left"&gt; 
            &lt;ul class="nav nav-tabs"&gt;
                &lt;li class="active"&gt;&lt;a href="#c1" data-toggle="tab"&gt;c1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#c2" data-toggle="tab"&gt;c2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#c3" data-toggle="tab"&gt;c3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class="tab-content tab-info"&gt;
                &lt;div class="tab-pane active" id="c1"&gt;
                  P1 child 1                                       
                &lt;/div&gt;
                &lt;div class="tab-pane" id="c2"&gt;
                  P1 child 2
                &lt;/div&gt;
                &lt;div class="tab-pane" id="c3"&gt;
                  P1 child 3
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  etc...
  </code></pre>