如何在点击li元素时添加类"Active"并同时将其从其他元素中删除？

Question

我正在尝试创建一个菜单,其中我想在点击时更改li元素的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() {
  $("#menu li").removeClass('selected');
    $(this).parent().addClass('selected');
});

DEMO

Answer 3

试试这个，这总是有效的

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