Question

我正在做一个HTML格式的软件界面原型，在菜单上我有一堆按钮，列出了背景图像。当我点击然后背景图像改变以显示按钮被选中时，我通过.replace（）做了那个url文件夹的名称：

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

}

ul class="icons"> 
    <li class="um"></li>
    <li class="dois">
        <ul class="submenu">
            <li></li>            
        </ul>
    </li>
    <li class="tres"></li>
    <li class="quatro"></li>
    <li class="cinco"></li>
    <li class="seis"></li>
    <li class="sete"></li>
    <li class="oito"></li>
    <li class="nove"></li>
    <li class="dez"></li>
</ul>

$("#menu ul.icons li").click(function() {
var urlIcon = $(this).css('background-image').replace('icons', 'selected');
$(this).css('background-image', urlIcon);
});

但是现在我需要在单击按钮时，处于“选定”状态的任何其他按钮变回未选中状态，因此我需要将背景图像的网址文件夹从“选定”更改回“图标”。我尝试使用replace（）和兄弟姐妹（），但它没有用。

Answer 1

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

CSS：

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

Jquery的：

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

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

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

1 个答案: