Changing Tab pane tabs programmatically in bootstrap

Question

I am using tab panes defined as

    <ul class="nav nav-tabs">
                   <li><a href="#personal" data-toggle="tab">Personal Information</a></li>
                   <li class="active"><a href="#contact"   data-toggle="tab">Contact</a></li>
                   <li><a href="#guardian"  data-toggle="tab">Parent/Guardian Information</a></li>
                   <li><a href="#education" data-toggle="tab">Educational Background</a></li>
                   <li><a href="#recommendations" data-toggle="tab">Study Prospects</a></li>
                </ul>


<div class="tab-content">                

                <div class="tab-pane" id="personal"></div>
                <div class="active tab-pane" id="contact"></div>
                <div class="tab-pane" id="guardian"></div>       
</div>

It can be seen that i have selected Contact as First selected Tab, however when I refresh the page< on full page load it automatically changes tab to Personal that is First tab.

Is there any way i can manually switch tabs via javascript etc?

Answer 1

there is a solution to change the tabs , so you will need to

1- keep the last tab some where

2- call the below function when the page refresh

this how to call it

activaTab('tab1');


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

Answer 2

This is the code you need

Html:

<li id="contact"><a href="#contact"   data-toggle="tab">Contact</a></li>

Javascript:

window.onload = function() {
  document.getElementById('contact').classList.add('active'); 
};