如何讓css按鈕在點擊後保持活動狀態？

Question

我試圖做一個導航欄，一旦用戶點擊圖像，圖像保持活動。在下面的例子中，葉子在點擊之後會保持綠色。以下是我在談論的一些代碼：

<a class="myButtonLink" href="#LinkURL">Leaf</a> 

<style> 
.myButtonLink { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: url('http://kyleschaeffer.com/wordpress/wp-content/uploads/2009/01/buttonleafhover.png') bottom; 
    text-indent: -99999px; 
} 
.myButtonLink:hover { 
    background-position: 0 0; 
} 
</style> 

Answer 1

http://jsfiddle.net/bnaegele/XHBZf/2/

$('.myButtonLink').click(function() { 
    $(this).css('background-position', '0 0'); 
}); 

Answer 2

您可以在點擊時向其應用類。

$('.myButtonLink').click(function() { 
    $(this).toggleClass('active'); 
}); 

此代碼具有在第二次單擊時取消選擇葉的附加效果。根據您的要求，您可能需要或不需要。

例子：http://jsfiddle.net/stulentsev/XHBZf/1/