jQuery - Adding and Removing selected classes

Question

Codepen: http://codepen.io/Travo100/pen/DtwvG

I'm currently having an issue where I have a typical navigation menu setup and would like clicked on links to have a class added to them when clicked. However, I only want one link at a time to have this class on it. I've setup a codepen, and currently my code is making all the links posses this class, without removing it after the link is clicked on.

HTML

    <nav>
  <ul>
    <li><a href="#" class="selected">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

a {
  text-decoration: none;
  padding: 10px;
  margin-left: 5px
}

li {
  float: left;
  list-style: none
}
.selected, a:hover {
  background-color: blue;
  color: white;
}

JS

 //When clicking on control list items 
$("nav a").click(function() {
//Deselect sibling elements 
$(this).siblings().removeClass( "selected" );
  //Select clicked element 
$(this).addClass( "selected" );
});

I'm new is jQuery/javascript so I apologize for this basic question.

Thank you for your help.

please add the code to the question, instead of just a link

Arun P Johny
– Arun P Johny

2014-05-14 06:18:02 +00:00
Commented May 14, 2014 at 6:18 — Arun P Johny
– Arun P Johny, Commented May 14, 2014 at 6:18

Bhushan Kawadkar · Accepted Answer · 2014-05-14 06:19:51Z

2

Use this, remove "selected" class from all nav a and add "selected" class to clicked element.

$("nav a").click(function() {
//Deselect sibling elements 
$("nav a").removeClass( "selected" );
  //Select clicked element 
$(this).addClass( "selected" );
});

answered May 14, 2014 at 6:19

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-05-14 06:25:09Z

0

http://codepen.io/anon/pen/djxJH

Remove the class in general before adding it.

Code:

$("nav a").click(function() {
  $('.selected').removeClass( "selected" );
  $(this).addClass( "selected" );
});

edited May 14, 2014 at 6:25

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered May 14, 2014 at 6:19

Collectives™ on Stack Overflow

jQuery - Adding and Removing selected classes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related