how to set tab-pane to active dynamically or manually

Question

I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.

My code is the following and works this way:

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

• When I click a button, a small window (div) appears which has the code written above.
• Clicking on any of the li elements, brings out its respective div
• 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)
• 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.
• 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).

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.

Any tips would be appreciated.

Answer 1

You just need to add a click listener to your button which you use to open the modal and trigger a click manually on first tab.

Here is the code:

$(function(){
$('#modal-btn').click(function () {
  $("#modalFormUlId a:eq(0)").click();
  // or
 //$('#modalFormUlId a:first').tab('show');

});
});

Here is working example http://jsfiddle.net/0mvt0qe5/3/

Answer 2

Onclick of any li, store the active tab in localStorage and when you hit the button you can check if active tab has any localStorage value and make them active accordingly. Hope this will help you. Please let me know if you face any issues using this. Try doing this: set the localStorage based on your active tab, you can give on onclick event of any tab

localStorage.setItem("activeTab", "Archivos");

Use localStorage.getItem("activeTab") , based on that add active class to the tab