Javascript 单击时更改未选定元素的背景图像

我正在做一个HTML格式的软件界面原型，在菜单上我有一堆按钮，上面有背景图片。当我单击时，背景图像会发生变化，显示该按钮已被选中，我是通过.replace（）url文件夹的名称执行此操作的：

#menu ul.icons li {
background-image:url(images/edit-menu/icons/hand.png);
background-size:contain;
display:block;

}

ul class=“icons”>















$（“#菜单ul.icons li”）。单击（函数（）{
var urlIcon=$（this）.css（'background-image'）。replace（'icons'，'selected'）；
$（this.css（'background-image'，urlIcon）；
});

---

但现在我需要的是，当点击一个按钮时，处于“选中”状态的任何其他按钮都会变回“未选中”，因此我需要将背景图像url的文件夹从“选中”变回“图标”。我尝试使用replace（）和sibbines（），但没有成功。

您可以在css中定义图标，并通过在javascript中切换活动类来操作它们

CSS:

Jquery：

$("#menu ul.icons li").click(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
});

---

如果您需要特定于每个列表项的图标，您可以在需要时更新css，使其特定于所需位置，但Jquery可以保持不变。

如果您可以发布不起作用的代码，这会有所帮助。我要做的是设置两个类-for background not selected和background selected。点击你可以查看DOM区域中的所有元素，从任何地方删除类“selected”，然后只将选中的类添加到当前单击的类中。我需要特定的图标，所以我向每个列表项（嗯，dois，tres，quatro，等等）添加一个类，所以如果我使用你的代码，我会得到类似class=“um.active”，所以它们removeClass（“active”）不起作用，因为没有一个类只有这个名称。它应该是class=“um active”（无点），removeClass（“active”）将起作用，因为它将删除该类，留给您class=“um”。试试看。看起来我可以让#menu ul.icons li.um激活，即使我在HTML上声明它，我想这是因为类名称中的空格。编辑：好的，我在css中这样做了：#menu ul.icons li.um激活，用点代替空格。现在唯一不起作用的是.sibles（）.removeClass（）partEdit:使它与$（this.sibles（）.removeClass（“active”）；）一起工作，谢谢@thebiffoff

#menu ul.icons li {
  background-image:url(images/edit-menu/icons/hand.png);
} 

#menu ul.icons li.active {
  background-image:url(images/edit-menu/icons/active.png);
} 

$("#menu ul.icons li").click(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
});