Bootstrap nav-tab 'active' class is not removed after clicking other tab(s)

[emxsys]

Clicking a tab selects the new tab, but the previous tab remains selected. Behind the scenes, the previous tab element retains its 'active' class. The prevents previous elements from being selected again because they are already 'active'.

[emxsys]

Bootstrap nav-tabs remove active class workaround.

The previous tab's hide.bs.tab event is not being fired. I don't know why. Thus the previous tab remains in the 'active' state after another tab is selected. This hack removes the 'active' class from the previous tab.

// Note, the event.target is the <a/> element, not the <li/> element containing the <a/>
$('.nav-tabs>li').on('shown.bs.tab', function (e) {
    // Remove the active class from all the <li> elements except the target's parent
    $(".nav-tabs>li.active").not($(e.target).parent()).removeClass("active");
});