單擊時更改未選定元素的背景圖像

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

但現在我需要的是，當點擊一個按鈕時，處於'selected'狀態的任何其他按鈕都會變回未選中狀態，因此我需要將背景圖像的url文件夾從'selected'更改爲'icons'。我嘗試過使用replace（）和siblings（），但它不起作用。

來源

2012-06-19 João Pedro

這將有助於您發佈無法使用的代碼。 –

我會做的是有2類 - 背景未選定和背景選定。點擊一下，您可以查看DOM的該區域中的所有元素，並從任何地方刪除「選定」類，然後僅將所選類添加到當前點擊的類中。 – Lukich

你可以在你的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的可保持不變。

來源

2012-06-19 23:21:39 thebiffboff

我需要的圖標是特定的，所以我添加一個類到每個列表項（嗯，dois，tres，quatro等），所以如果我使用你的代碼，我會得到像class =「um .active」的東西，所以他們removeClass（「active」）將不起作用，因爲沒有隻有該名稱的課程。 –

它應該是class =「um active」（no dot）和removeClass（「active」）將起作用，因爲它將刪除該類，而讓你的class =「um」。嘗試一下。 – thebiffboff

看來我可以讓#menu ul.icons li.um工作，即使我在HTML上聲明它，我認爲這是因爲類中的空間。 –

單擊時更改未選定元素的背景圖像

回答

相關問題