How to get css button to stay active after it has been clicked?


Tags: javascript,html,css

Problem :

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.com/wordpress/wp-content/uploads/2009/01/buttonleafhover.png') bottom;
    text-indent: -99999px;
 }
 .myButtonLink:hover {
    background-position: 0 0;
 }
</style>


Solution :

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

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

    CSS Howto..

    How to add css box-shadow using .style javascript property

    how to color the whole star icon when button is clicked

    How can I create custom tooltips with css pseudoelements

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to use top middle and center inside a div

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • How to make a barlike chart but only with html and css [closed]

    How to style an iframe?

    How to hide expand/collapse icon in vaadin treetable?

    How to add multiple link styles on the same page?

    How to use selenium IDE to find/check if a div object has children?

    How to vertical-align text on this input box for IE

    How to use media queries in css

    Using flexbox how do I prevent a specific element from inheriting flex layout?

    How to Align text with respect to image css

    How can one change the background image of a label using css with javascript

    Show missing CSS in Google Chrome

    How to specify styles for h:panelgrid in jsf

    How to pause css animation?

    Does anyone know how to create this 3d flip animation via CSS?

    How to create a button with a CSS-animated background?

    How to get on a single page different links based on css

    I've tried using vertical-align and color in static_nav div but it didn't work. Is this because its inside of the header? how would I fix this?

    In CSS, how to make the window non-scrollable when an element overflows?

    Show/Hide Div's via | Save Scrollbar | Save State

    How to make navigation follow when scrolled down? [duplicate]

    How to call JavaScript on change of CSS

    how to implement “blog” page in HTML/CSS? [closed]

    Jquery - 100% width slideshow whilst keeping the height propotional

    How to modify one element of a class without bothering the rest with the same CSS class?