如何通過鼠標點擊刪除活動類

Question

我做了兩個框，其中背景將在懸停和活動狀態下更改。這裏是我的工作： http://jsfiddle.net/3Vbz8/

在那裏，當我點擊「一」它會設置爲它的活動狀態（綠色背景）。沒關係。當我點擊「Two」時，它將設置爲活動狀態，「one」將返回到之前的狀態（灰色背景）。這對我也很好。但是，我希望當「one」設置爲活動狀態時，當我點擊「One」時，它也會回到正常狀態（灰色背景）。類似的事件也應該發生在「兩個」上。我怎樣才能做到這一點？

我的應用腳本：

$('.toggle').click(function(){ 
    $('.toggle').removeClass("active"); 
    $(this).toggleClass("active"); 
}); 

........... UPDATE ...........

克里希納幫我看看這個： http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){ 
    $('.toggle').not(this).removeClass("active"); 
    $(this).toggleClass("active"); 
}); 

我注意到這應該爲我的項目更新的問題。這個問題是：如果「one」處於「活動」狀態，那麼當時，如果任何用戶點擊「One」，它將返回到它的原始狀態。但是，如果用戶不從該按鈕上移除他/她的鼠標指針，該按鈕也顯示在綠色背景上。這是爲了懸停顏色。因此，如果任何用戶一次又一次點擊一個按鈕，他/她就不會理解該狀態是否改變，除非他/她移動了他/她的指針。我需要（當鼠標指針不被用戶移動時）：如果有人點擊「One」按鈕，它會變成「綠色背景」。如果用戶再次點擊「One」，它會變成「灰色背景」（爲了解更改用戶不必移動他/她的鼠標指針）。總之懸停顏色應該是不活動的，如果用戶一次又一次地點擊一個按鈕不動，他/她的鼠標指針

Answer 1

使用not(this)Documentation

http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){ 
    $('.toggle').not(this).removeClass("active"); 
    $(this).toggleClass("active"); 
}); 

編輯：

我喜歡@Roko C.Buljan觸摸CSS來區分懸停和點擊（評論中）

http://jsfiddle.net/3Vbz8/8

.toggle:hover { 
    background: #888; 
} 

.toggle.active{ 
    background: green; 
}