Toggle button background color on click
If you want to change button background color or toggle its color on click please use below code and test here: http://jsfiddle.net/javahonk/dyc2a/
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style type="text/css"> ul { list-style: none; margin: 40px 0; } li { float : left; } .tab_button { width:80px; height:40px; border:none; margin:5px; font-size:14px; text-align:left; font-weight:bold; line-height:14px; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; vertical-align:middle; background-color:#ffcc00; margin-bottom:11px; } .tab_button_active{ color:white; background-color:grey; } </style> <script type="text/javascript"> function colorchange(id){ $("#"+id).addClass('tab_button_active'); $('input[type="button"]').click(function(){ $('input[type="button"].tab_button_active').removeClass('tab_button_active'); $(this).addClass('tab_button_active'); }); } </script> <title>Toggle button background color on click</title> </head> <body> <ul > <li><input type="button" value="Button 1" id = "Button_1" class="tab_button" onclick="colorchange('Button_1');"/></li> <li><input type="button" value="Button 2" id = "Button_2" class="tab_button" onclick="colorchange('Button 2');"/></li> <li><input type="button" value="Button 3" id = "Button_2" class="tab_button" onclick="colorchange('Button 2');"/></li> </ul> </body> </html>
