javascript - How to get css button to stay active after it has been clicked? - Stack Overflow

Im trying to make a nav bar where once the user clicks on the image, the image stays active. In the following example the leaf would stay green after is is clicked. Here is a bit of code of what Im talking about:

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

<style>
 .myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('.png') bottom;
    text-indent: -99999px;
 }
 .myButtonLink:hover {
    background-position: 0 0;
 }
</style>

Im trying to make a nav bar where once the user clicks on the image, the image stays active. In the following example the leaf would stay green after is is clicked. Here is a bit of code of what Im talking about:

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

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

• javascript
• html
• css

Share Improve this question Follow edited Jan 12, 2012 at 5:18 Dipu Raj 1,89444 gold badges3333 silver badges3939 bronze badges asked Jan 12, 2012 at 4:16 BrambleBramble 1,3951313 gold badges3939 silver badges5757 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

http://jsfiddle/bnaegele/XHBZf/2/

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

You could apply a class to it on click.

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

This code has an added effect of deselecting the leaf on a second click. Depending on your requirements, you might want it or not.

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