Bootstrap: class="active" managed improperly with data-toggle="tab"

[tomkel]

This works:

<div class=navbar navbar-light bg-faded>
  <ul class=nav navbar-nav>
    <a class=nav-item nav-link active data-toggle=tab href=#start>Start</a>
    <a class=nav-item nav-link data-toggle=tab href=#form>Form</a>
    <a class=nav-item nav-link data-toggle=tab href=#status>Status</a>
    <a class=nav-item nav-link data-toggle=tab href=#reports>Reports</a>
  </ul>
</div>

<div class=tab-content>
  <div class=tab-pane active id=start>1</div>
  <div class=tab-pane id=form>2</div>
  <div class=tab-pane id=status>3</div>
  <div class=tab-pane id=reports>4</div>
</div>

However when the <ul> is changed to a <div>, the active classes are never unset, thus breaking the data-toggle.

This does not work:

<div class=navbar navbar-light bg-faded>
  <div class=nav navbar-nav>
    <a class=nav-item nav-link active data-toggle=tab href=#start>Start</a>
    <a class=nav-item nav-link data-toggle=tab href=#form>Form</a>
    <a class=nav-item nav-link data-toggle=tab href=#status>Status</a>
    <a class=nav-item nav-link data-toggle=tab href=#reports>Reports</a>
  </div>
</div>

<div class=tab-content>
  <div class=tab-pane active id=start>1</div>
  <div class=tab-pane id=form>2</div>
  <div class=tab-pane id=status>3</div>
  <div class=tab-pane id=reports>4</div>
</div>

[cvrebert]

@tomkel Please make your example into a JS Bin or JS Fiddle.

[tomkel]

here are the v4 jsfiddles:
working
not working

[twbs-lmvtfy]

Hi @tomkel!

You appear to have posted a live example (http://jsbin.com/fabijusugu/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 21, column 5: W012: .navbar's first child element should always be either .container or .container-fluid

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[twbs-lmvtfy]

Hi @tomkel!

You appear to have posted a live example (http://jsbin.com/fixiyinuwi/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 23, column 9 thru column 76: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
• line 24, column 9 thru column 68: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
• line 25, column 9 thru column 70: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
• line 26, column 9 thru column 71: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[tomkel]

The bug persists when setting .navbar's first child to .container.

[chris13524]

I'm having this issue as well, although whatever I do, it does not work.

<div class="nav nav-tabs" id="myTab">
    <a class="nav-item nav-link" data-toggle="tab" href="#one">One</a>
    <a class="nav-item nav-link" data-toggle="tab" href="#two">Two</a>
</div>
<div class="tab-content">
    <div class="tab-pane" id="one">ONE TAB</div>
    <div class="tab-pane" id="two">TWO TAB</div>
</div>
<script>
    $('#myTab a:first').tab('show');
</script>

[JimmyMultani]

@cvrebert Any idea when this will be fixed? Thanks.

[RyanZim]

@cvrebert Here is an updated JSBin using the latest v4-dev: http://jsbin.com/jinimoqoyo/1/edit?html,output

Also, could you please remove the awaiting reply label?

[twbs-lmvtfy]

Hi @RyanZim!

You appear to have posted a live example (http://jsbin.com/hedehalopa/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 18, column 5: W012: .navbar's first child element should always be either .container or .container-fluid

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[RyanZim]

Updated JSBin: http://jsbin.com/jinimoqoyo/1/edit?html,output

[CookingPixels]

This still happens, and it's tied with issue #18566

[RyanZim]

@cvrebert ping?

[CookingPixels]

Sorry folks, I was reading an (still) out of date documentation on mdb (materia design bootstrap) that didn't match v4 and triggered this particular behaviour along with the .active class issue.

[VaclavElias]

I have got the same problem as @tomkel and @chris13524 mentioned.

I use this in Bootstrap 3, simple and clean:

1. except no _active_ class added to the button :) just to the _tab-pane_ but the _tab-content_ is updated on each click.

<div>
    <button data-toggle="tab" data-target="#page0" class="btn btn-default btn-sm">1</button>
    <button data-toggle="tab" data-target="#page1" class="btn btn-default btn-sm">2</button>
    <button data-toggle="tab" data-target="#page2" class="btn btn-default btn-sm">3</button>
</div>
<div class="tab-content">
    <div id="page0" class="tab-pane fade in active">Page 1</div>
    <div id="page1" class="tab-pane fade">Page 2</div>
    <div id="page2" class="tab-pane fade">Page 3</div>
</div>

Things have changed in Bootstrap 4. The above example

1. adds the _active_ class to the button on click
2. it doesn't remove _active_ class from siblings when you click the other button(s)
3. the _tab-content_ is only updated once on each click, then it doesn't update because of 2.

The issue is mentioned also here https://github.com/twbs/bootstrap/issues/20523.

[arctic-ice-cool]

I have been using this as a workaround for now:

$(".nav-pills .nav-item .nav-link:not(.nav-pills .nav-item.dropdown .nav-link), .dropdown-item").click(function()
    {
        $(".dropdown-item.active").removeClass('active');
    });

[mdo]

Dupe of #18566.

[GregStrange]

I got around this by using onMouseUp instead of onClick because the active class is set on MouseDown. So using MouseUp means that my code won't execute until after the active class is set.

[patrickhlauke]

I got around this by using onMouseUp instead of onClick

FWIW, this breaks it for keyboard users

[PORRIS]

in my case the problem was the bootstrap version, I was using version 4.0.0-alpha.6 and I was using a method from an old version

1) add in the <ul role = "tablist">
2) in the <li> the class = 'active' is no longer going, it is <li class = "nav-item">
3) in the <a> aggregate <a class="nav-link active">
4) in the divs of the tab-contet must go active

 <div class="tab-content">
       <div class="tab-pane slide-left active" id="slide1">
           .
           .
            .
        </div>
</div>

final structure in my case

<ul class="nav nav-tabs nav-tabs-fillup" data-init-reponsive-tabs="dropdownfx" role="tablist">
 <li class="nav-item">
            <a data-toggle="tab" class="active nav-link " href="#slide1"><span>home</span></a>
        </li>
        <li class="nav-item">
            <a data-toggle="tab" class="nav-link" href="#slide2"><span>tab test</span></a>
        </li>
</ul>
<div class="tab-content">
 <div class="tab-pane slide-left active" id="slide1">
           .
           .
            .
        </div>
 <div class="tab-pane slide-left " id="slide2">
           .
           .
            .
        </div>
</div>

https://jsfiddle.net/tsathianathan/heyfshLy/

[jaylahoti]

If you are using Bootstrap 3.3.7 then you can write below custom JQuery to fix this bug.

$(function() { $(".apply-active").click(function() { // remove classes from all $(".apply-active").removeClass("active"); // add class to the one we clicked $(this).addClass("active"); }); });

[rob-lindman]

@jaylahoti I tried this and it seems to disable the tabs working at all.

[fayazrehmani]

fixed my issue through remove bt functionality with little custom code
$('#containerContainingTabs a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
var theThis = $(this);
$('#containerContainingTabs a').removeClass('active');
theThis.addClass('active');
});

containerContainingTabs is the id on div which container tabs links

[ahsan-asif]

Thank you so much fayazrehmani for this code...Its really work for me. I'm stuck before a 6h ago but you really solved my problem to give me this code.

[javierpr0]

fixed my issue through remove bt functionality with little custom code
$('#containerContainingTabs a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
var theThis = $(this);
$('#containerContainingTabs a').removeClass('active');
theThis.addClass('active');
});

containerContainingTabs is the id on div which container tabs links

Thank you @fayazrehmani this work for me.

[Tsanthan]

$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})

[kapilSoni101]

@PORRIS :sir but in my case whole page is redirected after click any tab can you tell me what the problem and i am angular9?

[damsalem]

@PORRIS :sir but in my case whole page is redirected after click any tab can you tell me what the problem and i am angular9?

You need to use e.preventDefault() exactly as the Bootstrap Documentation stated:

$('#myTab a').on('click', function (e) {
  e.preventDefault() // <-- this line
  $(this).tab('show')
})

[patrickhlauke]

and really, for in-page controls, you should be using <button> elements rather than links (unless that's something in angular that can't be changed for some odd reason)

[zigojacko]

This problem still exists in Bootstrap 4.5.3...

The 'active' class is not removed from default tab when switching between tabs.

[patrickhlauke]

can i suggest making a fresh issue, with a fresh codepen/jsbin example?

[zigojacko]

can i suggest making a fresh issue, with a fresh codepen/jsbin example?

I would normally but there are countless issues of the same problem on here spanning a number of years and it still hasn't been addressed despite all with activity and closed as duplicates etc.

If I find the time at some point, I'll try and raise a new issue 👍