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

Answer 4

您可以定位.siblings()

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

Answer 5

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

或者对于无javascript的方法，您可以使用单选按钮：

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

并使用兄弟选择器设置样式

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

DEMO

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

6 个答案: