Set button state to active with jQuery

Question

I need to get my buttons to become `:active` state when some keyboard button is pressed and not just when clicked. here is my code... thanks in advance. Script : ``` $(document).on('keypress', function (e) { var tag = e.target.tagName.toLowerCase(); if (e.which === 119 && tag != 'input' && tag != 'textarea') $('#forward').click(); if (e.which === 115 && tag != 'input' && tag != 'textarea') $('#back').click(); if (e.which === 97 && tag != 'input' && tag != 'textarea') $('#left').click(); if (e.which === 100 && tag != 'input' && tag != 'textarea') $('#right').click(); }); $(function () { $("#forward").click(function () { $.ajax('/forward'); }); $("#back").click(function () { $.ajax('/back'); }); $("#left").click(function () { $.ajax('/left'); }); $("#right").click(function () { $.ajax('/right'); }); }); ``` HTML : ```

Accepted Answer

You have to create a `class` which `style` is the same of the `:active` state of the `button` so :

General example

```
.buttonclass:active , .activated { /* somestyle */ }

$('.buttonclass').on('click', function(){ 
  $(this).addClass('activated'); //eventually removeClass of some previous class
  //other stuff
});
```

Your CODE

CSS

```
#forward:active, .forwardactivate{}
#back:active, .backactivate{}
```

Or if you have a `ul li button` `style` then you have to do:

```
ul li button:active, .activatebutton {} /* style*/
```

JAVASCRIPT

```
     $(function() {
            $("#forward").click(function() {
              $.ajax('/forward');
              if($(this).hasClass('forwardactivate'))
                $(this).removeClass('forwardactivate'); //change with .activatebutton
              else      
               $(this).addClass('forwardactivate');
             });

//etc
     });
```

Set button state to active with jQuery

Solution

Problem