如何在单击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。是否有任何方法可以实现这一点？

- AppleBud

---

请查看此链接：http://stackoverflow.com/questions/16327080/using-jquery-to-add-class-based-on-url - Vijayakumar Selvaraj

Answer 1

试一下

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

    });

演示

- Sridhar R

---

@AppleBud 很高兴能帮助你 :-) - Sridhar R

Answer 2

试试这个

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

DEMO

- Sowmya

Answer 3

试试这个，这永远都会起作用

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

- Wannes

Answer 4

你可以针对.siblings()进行定位。

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

- Dhaval Marthak

Answer 5

或者采用无需JavaScript的方法，您可以使用单选按钮：

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

使用兄弟选择器对它们进行样式设置。

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

DEMO

的英译中为：

{{链接1：DEMO}}

。

- Jan Drewniak

Answer 6

$("#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');
});

- codingrose