0

現在表示されている div を示すために、クリックすると変化する (「ライトアップ」) アイコンで構成されたナビゲーション バーがあります。

問題は、1 つの画像が変更されると (クリックすると点灯する)、他のすべての画像が元の状態に戻ることです。

現在、それらはすべて単純なトグルにすぎません。つまり、1 つずつクリックすると、両方とも点灯したままになります。これは明らかに望ましくありません。

これを実装する簡単な方法はありますか？

編集:私は現在、このjQuery 画像の切り替え方法を使用しています。私は本当のアマチュアなので、各トグルをどこで使用して、他のすべてのアイコンを元の状態に戻すかはわかりません。

4

1 に答える 1

1

選択したタブを示すクラスを定義し、CSS を使用してハイライトを適用します (画像の表示/非表示、スプライトの背景位置の変更など)。それで：

$("#menu li").click(function (e) {
    $("#menu li.selected").removeClass("selected");
    $(this).addClass("selected");
});

編集: CSS を使用してハイライトを適用するように既存のコードを調整するには、各メニュー項目が 2 つの画像を持つように html を変更します。

<ul id="menu">
    <li>
        <img class="off" src="menu1-original-icon.png" />
        <img class="on" src="menu1-lit-up-icon.png" />
    </li>
    <li>
        <img class="off" src="menu2-original-icon.png" />
        <img class="on" src="menu2-lit-up-icon.png" />
    </li>
    ...
</ul>

次に、CSS を使用して一方を非表示にし、他方を表示します。

#menu .on, #menu .selected .off
{
    display: none;
}
#menu .selected .on
{
    display: inline;
}

ここにデモがあります：jsfiddle.net/PLRfJ

何も選択しないようにするには (選択したものをクリックして選択を解除します)、.toggleClass()代わりに使用して、クラスを削除するときに.addClass()除外します。this

$("#menu li").click(function (e) {
    $("#menu li.selected").not(this).removeClass("selected");
    $(this).toggleClass("selected");
});

jsfiddle.net/PLRfJ/1

于 2013-03-16T22:30:36.900 に答える