How to make the css button stay active after clicking it?

Question

I am trying to create a navigation bar where, when a user clicks on an image, the image remains active. In the following example, the sheet will remain green after clicking. Here is some code I'm talking about:

<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

You can apply a class to it by clicking.

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

This code has the additional effect of deselecting a sheet in the second click. Depending on your requirements, you may want to or not.

Example: http://jsfiddle.net/stulentsev/XHBZf/1/