Question

I’m doing a software interface prototype in HTML format and on the menu I have a bunch of buttons that are list itens with background-images. when I click on then the background-image changes to show that the button is selected, I did that by .replace() the name of the url folder:

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

But now I need that when a button is clicked any other button that was in a ‘selected’ state changes back to unselected, so I need to change the folder of the url of the background-image from ‘selected’ back to ‘icons’. I tried using replace() and siblings() but it didn’t work.

Answer 1

You could define the icons in your css, and manipulate them by toggling an active class in your 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");
});

If you needed icons specific to each list item, you can update the css to be specific where needed, but the Jquery can stay the same.