Как добавить класс «Актив» при щелчке элемента li и удалить его из других одновременно?

Question

Я пытаюсь создать меню, в котором я хочу изменить CSS элемента li при щелчке, в то же время, CSS других литов должен оставаться прежним.

Мое меню:

<ul id="menu"> 
    <li><a href="#">Parent 1</a> </li> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">non-link item</a></li> 
    <li><a href="#">Parent 2</a> </li> 
</ul> 

и мой JQuery добавить CSS к выбранному элементу является:

$("#menu li a").click(function() { 
    $(this).parent().addClass('selected'); 

    }); 

Однако, прямо сейчас, я не могу удалить добавленный CSS из неправительственного -выбранный элемент. В любом случае я могу это реализовать?

Answer 1

Попробуйте

$("#menu li a").click(function() { 
    $(this).parent().addClass('selected').siblings().removeClass('selected'); 

    }); 

DEMO

Answer 2

$("#menu li a").click(function(){ 
    // Remove active if this does not have active class 
    if(!($(this).closest("li").hasClass("active"))){ 
     $(this).closest("#menu").find("li.active").removeClass('selected'); 
    } 
    $(this).closest("li").addClass('selected'); 
}); 

Answer 3

Вы можете настроить таргетинг на .siblings()

$("#menu li a").click(function() { 
    $(this).parent().addClass('selected').siblings().removeClass('selected'); 
}); 

Answer 4

Попробуйте

$("#menu li a").click(function() { 
    $("#menu li").removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 

DEMO

Answer 5

Или для JavaScript-свободный подход, вы можете использовать кнопки радио:

http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/

и использовать селектор родственный стилизовать их

input[type='radio']:checked + label 

DEMO

Answer 6

Попробуйте, это всегда будет работать

$("#menu li a").on('click', function(e){ 
    $("#menu .active").removeClass('active'); 
    $(this).parent().addClass('active'); 
    e.preventDefault(); 
});