如何在单击李元素时添加“活动”类并同时将其从其他元素中移除？

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(){ 
    // 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(); 
});