一次只切換一個onClick imageChange（將所有其他圖像切換到原始狀態）？

Question

我有一個導航欄，它由點擊時改變（「點亮」）的圖標組成，以指示當前顯示哪個div。

問題是，我喜歡它，當一個圖像被改變（點擊時點亮），所有其他圖像恢復到原始狀態。

目前他們都只是簡單的切換，這意味着當我點擊一個，然後另一個，他們都保持點亮，我顯然不想。

有沒有簡單的方法來實現這個？

編輯：我目前正在使用jQuery圖片切換的this method。我是一名真正的業餘愛好者，所以我不知道我會在哪裏開始使用每個切換，以將所有其他圖標切換回原始狀態。

Answer 1

定義一個類來指示選定的選項卡，並使用CSS應用高亮（顯示/隱藏圖像，更改精靈的背景位置等等）。然後：

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

編輯：適應現有的代碼使用CSS應用的亮點，改變你的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