jQuery - Ajout et suppression de classes sélectionnées

Question

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

Je vais avoir actuellement un problème où j'ai un menu typique de navigation configuration et que vous souhaitez cliqué sur les liens pour avoir une classe ajouté à eux quand on clique dessus. Cependant, je veux seulement un lien à la fois pour avoir cette classe là-dessus. J'ai installé un codepen, et actuellement mon code fait en sorte que tous les liens possèdent cette classe, sans la supprimer après avoir cliqué sur le lien.

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"); 
}); 

Je suis nouveau est jQuery/javascript donc je présente mes excuses pour cette question fondamentale.

Nous vous remercions de votre aide.

Answer 1

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

Effacez la classe en général avant de l'ajouter.

code:

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

Answer 2

utiliser, de supprimer la classe "sélectionnée" de tous nav a et ajouter "sélectionné" classe à l'élément cliquée.

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