选择时更改列表项的背景颜色

Question

我想改变我尝试过的菜单项的背景颜色 以下功能但无效

$('#list-menu a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    });

但我没有得到任何感谢 这是我的jsfiddle链接

Answer 1

你的CSS略有偏差。

中有一个迷路逗号

#list-menu a.active {
 border: 1px solid #000000;
background: #333333;
color: #ffffff;
}

虽然我不是专家，但我也改掉了JQ

$('#list-menu a').click(function(){
    $(this).addClass('active');
    $('#list-menu a').not(this).removeClass('active');
});

JSfiddle Demo

至于你原来的JQ，我相信这是因为你将更改应用于li

内没有兄弟姐妹的锚点

Answer 2

您可以先删除所有类，然后添加所需的类：

$('#list-menu a').click(function(){   
    $('#list-menu a').removeClass('active');
    $(this).addClass('active');
});

您的.siblings()选择器不起作用，因为该链接实际上嵌套在li内，因此您无法在a内定位li。我建议您将.active类从a移到li，这样您就可以通过这种方式更改活动项的背景：

$('#list-menu li a').click(function(){   
    $(this).parent().addClass('active').siblings().removeClass('active');
}); 

选中此Fiddle