-1

我正在做一个 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);
});

但是现在我需要在单击按钮时将处于“已选择”状态的任何其他按钮更改回未选择状态，因此我需要将背景图像的 url 文件夹从“已选择”更改回“图标” . 我尝试使用替换（）和兄弟姐妹（），但没有奏效。

4

1 回答 1

0

您可以在 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);
}

查询：

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

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

于 2012-06-19T23:21:39.420 回答