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

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/

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

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

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 👍

I got around this by using onMouseUp instead of onClick

FWIW, this breaks it for keyboard users

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

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.

here are the v4 jsfiddles: working not working