How to auto select currently selected bootstrap tabs on page load

 

Description :-

In bootstrap default tabs design, the problem is when you load the page, the currently selected tabs will lost and selection forwarded to the default tabs.

Means, when you are working on "team" tabs, as shown in image, and the page reload/refresh done. The tabs selection will go to the default "working" tabs as shown in image.

For solution, we need to change the <li> section and add a javascript function.

change the every tab like this

<ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">

                  

                  <li class="nav-item">

                    <a class="nav-link active" id="custom-tabs-one-personal-tab" data-toggle="pill" href="#custom-tabs-one-personal" onclick="window.location.hash='custom-tabs-one-personal';" role="tab" aria-controls="custom-tabs-one-personal" aria-selected="true">Personal</a>

                  </li>

here, i added onclick function on every tabs li elements.

Now i have to create a javascript function which loaded the currently selected tabs on page loads.

<script language="javascript">

  var gethash = location.hash;

  gethash = gethash.substring(1);

 

  $(document).ready(function(){

  activaTab(gethash);

});

function activaTab(tab){

  $('.nav-tabs a[href="#' + tab + '"]').tab('show');

};

activaTab(gethash);

 

  </script>      

More info can be obtained from this linklink.