-1

私は 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() を使用してみましたが、うまくいきませんでした。

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

Jクエリ:

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

各リスト項目に固有のアイコンが必要な場合は、css を更新して必要な場所に固有にすることができますが、Jquery は同じままにすることができます。

于 2012-06-19T23:21:39.420 に答える