jquery - 如何在单击 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>

我将 CSS 添加到所选元素的 jquery 是:

 $("#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