Set button state to active with jQuery -

i need buttons go .active state when keyboard button pressed , not when clicked.

here code... 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 :

<ul class="button-list">  <li>     <button id="forward">w</button>  </li>  <li>     <button id="back">s</button>  </li>  <li>     <button id="left">a</button>  </li>  <li>     <button id="right">d</button>  </li> </ul> 

...................................................................................

you have create class style same of :active state of button :

general example

.buttonclass:active , .activated { /* somestyle */ }  $('.buttonclass').on('click', function(){    $(this).addclass('activated'); //eventually removeclass of previous class   //other stuff }); 

your code

css

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

or if have ul li button style have do:

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

javascript

     $(function() {             $("#forward").click(function() {               $.ajax('/forward');               if($(this).hasclass('forwardactivate'))                 $(this).removeclass('forwardactivate'); //change .activatebutton               else                      $(this).addclass('forwardactivate');              });              //etc      });