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?

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

score 16 · Answer 1 · edited Feb 20 '22 at 10:26

16

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

Keep the last tab some where.
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');
};

edited Feb 20 '22 at 10:26

Uwe Keim

39,551
56
175
291

answered Jun 29 '18 at 02:42

Ali

1,080
16
22

score 0 · Answer 2 · edited Feb 20 '22 at 10:27

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'); 
};

edited Feb 20 '22 at 10:27

Uwe Keim

39,551
56
175
291

answered Mar 22 '18 at 06:11

Triet Pham

88
1
14

score 0 · Answer 3 · answered Apr 29 '23 at 22:34

To piggyback off of Uwe Keim's answer, this is how you would accomplish his solution in angularjs (which I had a need for) - in case this helps someone:

 $timeout(function () {
            angular.element('.nav-tabs a[href="#' + tabname + '"]').tab("show");
        }, 0);

Changing Tab pane tabs programmatically in bootstrap

3 Answers3

Linked