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 you can call it:

activeTab('tab1');

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