Bootstrap: .active Tab state is never removed on navigation

[bpierson]

When using a nav or div element with direct a children (as opposed to ul > li > a), the active tab state is never removed from a tab upon navigation.

Ply

<!-- Nav tabs -->
<nav class="nav nav-tabs" role="tablist">
    <a class="nav-link nav-item active" data-toggle="tab" href="#home" role="tab">Home</a>
    <a class="nav-link nav-item" data-toggle="tab" href="#profile" role="tab">Profile</a>
    <a class="nav-link nav-item" data-toggle="tab" href="#messages" role="tab">Messages</a>
    <a class="nav-link nav-item" data-toggle="tab" href="#settings" role="tab">Settings</a>
</nav>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">Home</div>
    <div class="tab-pane" id="profile" role="tabpanel">Profile</div>
    <div class="tab-pane" id="messages" role="tabpanel">Messages</div>
    <div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>

[twbs-lmvtfy]

Hi @bpierson!

You appear to have posted a live example (http://s.bootply.com/render/nbvD1egvsF), 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 5, column 9 thru column 30: A document must not include both a meta element with an http-equiv attribute whose value is content-type, and a meta element with a charset attribute.
• line 41, column 1 thru column 41: Bad value tablist for attribute role on element nav.

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._)

[cvrebert]

Possibly related to #17371 or #18566.

[bpierson]

The problem lies with the UL selector on line 2554. It's currently defined as:

    UL: 'ul:not(.dropdown-menu)',

Further down, on lines 2598-2604, we see this:

        var ulElement = $(this._element).closest(Selector.UL)[0];
        var selector = Util.getSelectorFromElement(this._element);

        if (ulElement) {
          previous = $.makeArray($(ulElement).find(Selector.ACTIVE));
          previous = previous[previous.length - 1];
        }

So the previous variable will never be assigned, because there is no ul element, and there is no else fallback to find the .actives.

Changing the UL selector to:

    UL: 'ul:not(.dropdown-menu), nav.nav',

(that is, adding nav.nav to the selector list) partially fixes the problem, but does not solve the issue with dropdowns. The dropdown header tab does not show .active state, and the dropdown-item sometimes does not release it.

[bpierson]

I was able to solve this with a combination of a workaround and changing the selector on line 2554.

Workaround:

$(document).ready(function () {
    $('.nav').on('shown.bs.tab', 'a', function (e) {
        console.log(e.relatedTarget);
        if (e.relatedTarget) {
            $(e.relatedTarget).removeClass('active in');
        }
    });
});

Selector change:

Old 2554: UL: 'ul:not(.dropdown-menu)',
New 2554: UL: 'ul:not(.dropdown-toggle), nav.nav:not(.dropdown-toggle)',

Without the selector change, the code is targeting the .dropdown with the .active class. You can see this in Chrome inspector by watching the .active class show up on the .dropdown element instead of the .dropdown-toggle element.

[mdo]

Dupe of #18566 and #19374.

[ahsan-asif]

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