Prevent Tab link to add active class to Parent li

[moinakbarali]

When I click on a link which has data-toggle="tab" inside li it automatically add active class to parent li.

Is there a way I can prevent bootstrap tabs link to add active class to current parent li because I want to do it manually?

[peterblazejewicz]

@moinakbarali

$('.nav-tabs').on('show.bs.tab', 'a', function(event) {
    event.preventDefault();
});
$('.nav-tabs').on('hide.bs.tab', 'a', function(event) {
    event.preventDefault();
});

Above (any of above handlers) stops plugin internal routine from managing previous/current active state selection after clicking a tab:
https://github.com/twbs/bootstrap/blob/master/js/tab.js#L47
So it's up to you to implement the rest

[moinakbarali]

@peterblazejewicz
I solved it, On 'shown.bs.tab' I removed active class from all li.
But I think it should not be the default behavior of Bootstrap tabs. there should be an option to enable or disable this like collapse plugin use data-parent.

[redbmk]

Does the li being given the active class have the .dropdown class? If so, I believe this is due to a bug I just ran into:
https://github.com/twbs/bootstrap/blob/master/js/tab.js#L91

The code essentially says if (true) since element.parent('.dropdown-menu') will always return an Array, which will evaluate to true. I think the code should be changed to element.parent('.dropdown-menu').length. If that's not your problem please let me know so I can file a bug elsewhere.

[mdo]

I don't think we'll be adding anything to the project to do this. Thanks though.

[redbmk]

@mdo, Does this line in tab.js not seem like it is unintentionally always adding the active class to the dropdown? An example would be if you had tabs nested inside a dropdown. It seems like a bug and this one-line fix might solve @moinakbarali's issue:

-      if (element.parent('.dropdown-menu')) {
+      if (element.parent('.dropdown-menu').length) {

[cvrebert]

Yeah, that's definitely a bug. Opened #15630.