jQuery Siblings tag "a"

Question

Похож на простой, но я не могу найти, почему он не работает. Я просто пытаюсь «removeClass» братьев и сестер остальных сиблей «a», когда я нажимаю один из них. Что я делаю неправильно? Заранее спасибо.

CSS ------->

.navigation li a{ 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    color: #544539; 
    font-size: 18px; 
    background: #FFFFFF; 
} 

a.selected { 
    background: #003662; 
    color: #ffffff; 
} 

HTML ------->

<nav class="navigation"> 
    <ul> 
     <li><a href="#" title="home">Home</a></li> 
     <li><a href="#" title="collect">Collect</a></li> 
     <li><a href="#" title="spend">Spend</a></li> 
     <li><a href="#" title="about">About Us</a></li> 
    </ul> 
</nav> 

JQuery ------->

$(".navigation a").on("click", function() {        
    $(this).addClass("selected"); 
    $(this).siblings().removeClass("selected"); 
}); 

Answer 1

использование:

$(this).parent().siblings().find('a').removeClass("selected");//remove class from sibling a tags 
$(this).addClass("selected");//and then add class to current a tag 

вы также можете использовать:

$('.selected').removeClass("selected"); 
$(this).addClass("selected"); 

Answer 2

Вам просто нужно удалить класс active из всех якорей и добавить его к текущему щелкнули якоря:

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

Fiddle Demo

Answer 3

Попробуйте простой способ:

http://jsfiddle.net/aamir/fWKsV/

Изменение CSS для:

li.selected a { 
    background: #003662; 
    color: #ffffff; 
} 

JQuery:

$(".navigation a").on("click", function() {        
    var $li = $(this).closest('li'); 
    $li.addClass('selected') 
    $li.siblings().removeClass("selected"); 
}); 

Answer 4

сделать это в JS

$(".navigation a").on("click", function() {        
    $(this).addClass("selected"); 
    $(this).siblings().removeClass("selected"); 
}); 

http://jsfiddle.net/mahavir4dev/v9LGY/