私は HTML 形式でソフトウェア インターフェイスのプロトタイプを作成しています。メニューには、背景画像を含むリストのボタンがたくさんあります。をクリックすると、背景画像が変更されてボタンが選択されていることが示されます。URL フォルダーの名前を .replace() で変更しました。
#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 のフォルダーを「選択済み」から「アイコン」に戻す必要があります。 . replace() と siblings() を使用してみましたが、うまくいきませんでした。