how to set tab-pane to active dynamically or manually
<p>I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.</p>

<p>My code is the following and works this way:</p>

<pre><code>&lt;ul id="modalFormUlId" class="bootstrapWizard form-wizard"&gt;
    &lt;li class="active" data-target="#step1"&gt;&lt;a href="#tab1" data-toggle="tab"&gt; &lt;span class="step"&gt;1&lt;/span&gt;&lt;span class="title"&gt;Datos Generales&lt;/span&gt; &lt;/a&gt;
    &lt;/li&gt;
    &lt;li data-target="#step2"&gt;&lt;a href="#tab2" data-toggle="tab"&gt; &lt;span class="step"&gt;2&lt;/span&gt; &lt;span class="title"&gt;Detalles Financieros&lt;/span&gt; &lt;/a&gt;
    &lt;/li&gt;
    &lt;li data-target="#step3"&gt;&lt;a href="#tab3" data-toggle="tab"&gt; &lt;span class="step"&gt;3&lt;/span&gt; &lt;span class="title"&gt;Archivos&lt;/span&gt; &lt;/a&gt;
    &lt;/li&gt;
    &lt;li data-target="#step4"&gt;&lt;a href="#tab4" data-toggle="tab"&gt; &lt;span class="step"&gt;4&lt;/span&gt; &lt;span class="title"&gt;Historial Transacciones&lt;/span&gt; &lt;/a&gt;
    &lt;/li&gt;
    &lt;li data-target="#step5"&gt;&lt;a href="#tab5" data-toggle="tab"&gt; &lt;span class="step"&gt;5&lt;/span&gt; &lt;span class="title"&gt;Resguardante&lt;/span&gt; &lt;/a&gt;
    &lt;/li&gt;                                       
    &lt;li data-target="#step6"&gt;&lt;a href="#tab6" data-toggle="tab"&gt; &lt;span class="step"&gt;6&lt;/span&gt; &lt;span class="title"&gt;Etiqueta&lt;/span&gt; &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="tab1"&gt;
    &lt;br&gt;
    &lt;h3&gt;&lt;strong&gt;&lt;/strong&gt; Datos Generales&lt;/h3&gt;                                          
&lt;/div&gt;&lt;!-- End tab1 --&gt;     
&lt;div class="tab-pane" id="tab2"&gt;
    &lt;br&gt;
    &lt;h3&gt;&lt;strong&gt;&lt;/strong&gt; Detalles Financieros&lt;/h3&gt;                                     
&lt;/div&gt;
&lt;div class="tab-pane" id="tab3"&gt;
    &lt;br&gt;
    &lt;h3&gt;&lt;strong&gt;&lt;/strong&gt; Lista Archivos&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="tab-pane" id="tab4"&gt;
    &lt;br&gt;
    &lt;h3&gt;&lt;strong&gt;&lt;/strong&gt; Historial de Transacciones&lt;/h3&gt;
&lt;/div&gt;                                      
&lt;div class="tab-pane" id="tab5"&gt;
    &lt;br&gt;
    &lt;h3&gt;&lt;strong&gt;&lt;/strong&gt; Resguardante&lt;/h3&gt;     
&lt;/div&gt;
&lt;div class="tab-pane" id="tab6"&gt;
    &lt;br&gt;
    &lt;h3 &gt;&lt;strong&gt;&lt;/strong&gt; Etiqueta del Bien&lt;/h3&gt;
&lt;/div&gt;
</code></pre>

<ul>
<li>When I click a button, a small window (div) appears which has the
code written above.</li>
<li>Clicking on any of the li elements, brings out its respective div</li>
<li>Bootstrap class makes it so the li elements show as circles that
paint green when set as active (default for first one, then changes
as I click on any of them)</li>
<li>As you can see, the first li element has its class set as active,
since when the window its first opened, its the default choice shown.</li>
<li>When I close my div and re-open it by clicking the button, it appears
again having the last li element clicked as active (So, if I clicked
li for #step3 element then close my window and opened it again, #tab3
div would still be showing).</li>
</ul>

<p>My problem comes when trying to set a different li element as active after reopening my window, since #step1 keeps showing as the active one even when any other div is the one currently being displayed, I know I would have to get the current active div and set its li element to active or something like that, but I'm still inexperienced in jQuery (need to do it with jQuery) and can't seem to do it.</p>

<p>Any tips would be appreciated.</p>