Toggle button background color on click

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>

Leave a Reply

Your email address will not be published. Required fields are marked *