單擊后如何使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/