Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs JavaScript not removing 'active' class from nav-pills nav-stacked #20797

Closed
Gong-Bao-Chicken opened this issue Sep 27, 2016 · 3 comments
Closed
Labels

Comments

@Gong-Bao-Chicken
Copy link

Gong-Bao-Chicken commented Sep 27, 2016

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-link. 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

@twbs-lmvtfy
Copy link

Hi @P-h-i-l!

You appear to have posted a live example (http://codepen.io/anon/pen/ALRGqj.html), 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 13, column 3 thru column 75: An element with role=tab must be contained in, or owned by, an element with role=tablist.
  • line 14, column 3 thru column 65: An element with role=tab must be contained in, or owned by, an element with role=tablist.
  • line 15, column 3 thru column 71: An element with role=tab must be contained in, or owned by, an element with role=tablist.

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

@Gong-Bao-Chicken Gong-Bao-Chicken changed the title Tabs JavaScript not working with nav-pills nav-stacked Tabs JavaScript not removing 'active' class from nav-pills nav-stacked Sep 27, 2016
@cvrebert
Copy link
Collaborator

Possible duplicate of #19374.

@mdo
Copy link
Member

mdo commented Nov 28, 2016

Dupe of #18566 and #19374.

@mdo mdo closed this as completed Nov 28, 2016
@mdo mdo mentioned this issue Nov 28, 2016
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants