Tabs JavaScript not removing 'active' class from nav-pills nav-stacked
Created by: Gong-Bao-Chicken
Expected Behaviour:
When activating a nav-link
, the active
state gets removed and added to the now active nav-link
. Therefore, the active state gets removed and added to the active
item. Additionally the content transitions between the current and now active.
Problem:
The active class is not being removed from nav-lin
k. Thus each item can only be navigated to once.
Codepen ( UPDATED ) : http://codepen.io/anon/pen/ALRGqj?js-preprocessor=none
I hope the syntax is correct since there is no example in the docs:
<!-- Navigation -->
<nav class="nav nav-pills nav-stacked" role="tablist">
<a class="nav-link active" data-toggle="pill" role="tab" href="#profile">Active</a>
<a class="nav-link" data-toggle="pill" role="tab" href="#buzz">Link</a>
<a class="nav-link" data-toggle="pill" role="tab" href="#references">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
<!-- Tab panes -->
<div class="tab-content" role="tabpanel">
<div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>
edit: May be related to #20039 , but tabs work, pills (stacked) dont