6

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?

Park
  • 1,924
  • 1
  • 15
  • 19
Muhammad Umar
  • 11,131
  • 20
  • 83
  • 183
  • 2
    https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript set the one you want active and remove the other active one. – Doomenik Mar 22 '18 at 06:01
  • @Doomenik You didn't read the question. the problem is at page load it automatically selects the first tab. even tho i have put active on second tab – Muhammad Umar Mar 22 '18 at 06:48

2 Answers2

10

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');
};
Uwe Keim
  • 38,279
  • 56
  • 171
  • 280
Ali
  • 934
  • 13
  • 20
0

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'); 
};
Uwe Keim
  • 38,279
  • 56
  • 171
  • 280
Triet Pham
  • 80
  • 14