I have several buttons that function like radio buttons - only one can be selected at a time:
<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>
Each button has a gradient background for the unselected state:
#btn-bronze
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
width: 33%;
height: 100%;
}
#btn-silver
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
#btn-gold
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
width: 33%;
height: 100%;
}
When selected, the button should change its background color by adding the following class:
.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}
This is achieved using jQuery with specific methods for each button:
$("#btn-bronze").click(function()
{
console.log("bronze");
$(this).addClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-silver").click(function()
{
console.log("silver");
$("#btn-broze").removeClass('blue-selected');
$(this).addClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-gold").click(function()
{
console.log("gold");
$("#btn-broze").removeClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$(this).addClass('blue-selected');
});
Despite the console log message appearing when clicking a button, the background color does not change as expected. Any ideas on what might be going wrong? Check out the live example here.