如何让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/