class="active" managed improperly with data-toggle="tab" #19374

tomkel · 2016-03-03T04:12:14Z

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>

The text was updated successfully, but these errors were encountered:

cvrebert · 2016-03-03T05:02:13Z

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

tomkel · 2016-03-03T16:31:39Z

here are the v4 jsfiddles:
working
not working

twbs-lmvtfy · 2016-03-03T16:31:41Z

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 · 2016-03-03T16:31:41Z

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 · 2016-03-03T16:33:20Z

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

chris13524 · 2016-03-28T22:13:02Z

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 · 2016-04-21T20:22:23Z

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

RyanZim · 2016-05-06T18:20:20Z

@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 · 2016-05-06T18:20:24Z

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 · 2016-05-06T18:22:23Z

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

CookingPixels · 2016-07-15T19:26:52Z

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

RyanZim · 2016-07-15T19:47:51Z

@cvrebert ping?

CookingPixels · 2016-07-15T20:19:30Z

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 · 2016-09-07T16:06:33Z

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

I use this in Bootstrap 3, simple and clean:

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

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

The issue is mentioned also here #20523.

arctic-ice-cool · 2016-11-03T20:52:28Z

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 · 2016-11-28T00:07:10Z

Dupe of #18566.

ghost · 2018-01-03T07:00:16Z

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 · 2018-01-03T09:09:37Z

I got around this by using onMouseUp instead of onClick

FWIW, this breaks it for keyboard users

PORRIS · 2018-01-10T20:50:56Z

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

add in the <ul role = "tablist">
in the <li> the class = 'active' is no longer going, it is <li class = "nav-item">
in the <a> aggregate <a class="nav-link active">
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 · 2018-01-31T09:17:34Z

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 · 2018-06-16T15:28:34Z

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

fayazrehmani · 2018-10-08T07:51:18Z

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 · 2019-04-18T18:06:12Z

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 · 2019-06-25T17:40:36Z

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 · 2020-02-10T07:49:42Z

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

kapilSoni101 · 2020-04-04T05:13:22Z

@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 · 2020-04-07T00:48:18Z

@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 · 2020-04-07T00:58:19Z

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 · 2020-11-18T14:26:43Z

This problem still exists in Bootstrap 4.5.3...

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

patrickhlauke · 2020-11-18T14:38:37Z

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

zigojacko · 2020-11-18T16:37:15Z

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 👍

Yaz-X · 2021-01-22T23:08:08Z

2021 and still an issue LOL, i have multiple tab controls in the page, so this worked for me:

$(document).ready(function () {
             //Fix Bootstrap bug with Tab control not removing active class when switching tabs
              $(".nav-tabs li.nav-item a.nav-link").click(function () {
                        $(".nav-tabs li.nav-item a.nav-link").removeClass('active').off('click');
                   });
          });

kingofsevens · 2021-02-15T22:28:34Z

Here is a working example with a fix.

Below is the fix. If you comment out that part, you can still see it is not fixed for 5.0.0-beta2

$(".nav-pills button").click(function () {
  $(this).closest(".nav-pills").find("button").not($(this)).removeClass("active");
});

cvrebert added js awaiting-reply labels Mar 3, 2016

cvrebert added v4 and removed awaiting-reply labels Sep 28, 2016

cvrebert mentioned this issue Sep 28, 2016

Tabs JavaScript not removing 'active' class from nav-pills nav-stacked #20797

Closed

mdo mentioned this issue Nov 28, 2016

.active Tab state is never removed on navigation #20523

Closed

mdo closed this as completed Nov 28, 2016

mdo mentioned this issue Nov 28, 2016

Tab JS and .active class #21223

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

class="active" managed improperly with data-toggle="tab" #19374

class="active" managed improperly with data-toggle="tab" #19374

tomkel commented Mar 3, 2016

cvrebert commented Mar 3, 2016

tomkel commented Mar 3, 2016

twbs-lmvtfy commented Mar 3, 2016

twbs-lmvtfy commented Mar 3, 2016

tomkel commented Mar 3, 2016

chris13524 commented Mar 28, 2016

JimmyMultani commented Apr 21, 2016 •

edited

Loading

RyanZim commented May 6, 2016 •

edited

Loading

twbs-lmvtfy commented May 6, 2016

RyanZim commented May 6, 2016 •

edited

Loading

CookingPixels commented Jul 15, 2016

RyanZim commented Jul 15, 2016

CookingPixels commented Jul 15, 2016

VaclavElias commented Sep 7, 2016 •

edited

Loading

arctic-ice-cool commented Nov 3, 2016 •

edited

Loading

mdo commented Nov 28, 2016

ghost commented Jan 3, 2018

patrickhlauke commented Jan 3, 2018

PORRIS commented Jan 10, 2018 •

edited

Loading

jaylahoti commented Jan 31, 2018

rob-lindman commented Jun 16, 2018

fayazrehmani commented Oct 8, 2018 •

edited

Loading

ahsan-asif commented Apr 18, 2019

javierpr0 commented Jun 25, 2019

Tsanthan commented Feb 10, 2020

kapilSoni101 commented Apr 4, 2020

damsalem commented Apr 7, 2020

patrickhlauke commented Apr 7, 2020

zigojacko commented Nov 18, 2020

patrickhlauke commented Nov 18, 2020

zigojacko commented Nov 18, 2020

Yaz-X commented Jan 22, 2021 •

edited

Loading

kingofsevens commented Feb 15, 2021

class="active" managed improperly with data-toggle="tab" #19374

class="active" managed improperly with data-toggle="tab" #19374

Comments

tomkel commented Mar 3, 2016

cvrebert commented Mar 3, 2016

tomkel commented Mar 3, 2016

twbs-lmvtfy commented Mar 3, 2016

twbs-lmvtfy commented Mar 3, 2016

tomkel commented Mar 3, 2016

chris13524 commented Mar 28, 2016

JimmyMultani commented Apr 21, 2016 • edited Loading

RyanZim commented May 6, 2016 • edited Loading

twbs-lmvtfy commented May 6, 2016

RyanZim commented May 6, 2016 • edited Loading

CookingPixels commented Jul 15, 2016

RyanZim commented Jul 15, 2016

CookingPixels commented Jul 15, 2016

VaclavElias commented Sep 7, 2016 • edited Loading

arctic-ice-cool commented Nov 3, 2016 • edited Loading

mdo commented Nov 28, 2016

ghost commented Jan 3, 2018

patrickhlauke commented Jan 3, 2018

PORRIS commented Jan 10, 2018 • edited Loading

jaylahoti commented Jan 31, 2018

rob-lindman commented Jun 16, 2018

fayazrehmani commented Oct 8, 2018 • edited Loading

ahsan-asif commented Apr 18, 2019

javierpr0 commented Jun 25, 2019

Tsanthan commented Feb 10, 2020

kapilSoni101 commented Apr 4, 2020

damsalem commented Apr 7, 2020

patrickhlauke commented Apr 7, 2020

zigojacko commented Nov 18, 2020

patrickhlauke commented Nov 18, 2020

zigojacko commented Nov 18, 2020

Yaz-X commented Jan 22, 2021 • edited Loading

kingofsevens commented Feb 15, 2021

JimmyMultani commented Apr 21, 2016 •

edited

Loading

RyanZim commented May 6, 2016 •

edited

Loading

RyanZim commented May 6, 2016 •

edited

Loading

VaclavElias commented Sep 7, 2016 •

edited

Loading

arctic-ice-cool commented Nov 3, 2016 •

edited

Loading

PORRIS commented Jan 10, 2018 •

edited

Loading

fayazrehmani commented Oct 8, 2018 •

edited

Loading

Yaz-X commented Jan 22, 2021 •

edited

Loading