按钮将不会改变颜色（HTML5）

我有行为很像单选按钮三个按钮 - 只有一个可以一次选择：按钮将不会改变颜色（HTML5）

<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>

为正常，未选中状态，所有的按钮使用渐变背景：

#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%; 
}

选择时所选择的按钮应该添加此类修改背景颜色：

.blue-selected 
{ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));; 
}

这是在被称为身体负荷时的方法，用jQuery完成：

$("#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'); 
});

当我点击这些按钮中的一个，显示在控制台日志消息，但背景颜色保持不变。我究竟做错了什么？ Here is the fiddle。

来源

2013-04-11 Phil

我做的一个简化版本你的jsfiddle来解决你的问题：http://jsfiddle.net/9qZZR/ – 2013-04-11 22:11:12

我会解决一些事情。

使用类而不是ID定位。我留下了身份证，但你现在不需要他们：

<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> 
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button> 
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>

然后我会使用这些样式。这样，我可以添加更多的按钮，而无需创建新的风格：

.btn 
{ 
    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:first-child { 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
} 

.btn:last-child { 
    -webkit-border-top-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
} 

.btn.blue-selected 
{ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC)); 
}

最后，我想简化了地狱的JavaScript的：

$(".btn").click(function() { 
    $(".btn").removeClass("blue-selected"); 
    $(this).addClass('blue-selected'); 
});

http://jsfiddle.net/4ZygH/1/

来源

2013-04-11 22:10:56

哇，感谢您的修复/简化！ – Phil 2013-04-12 01:52:47

#btn-bronze比.blue-selected具有更高的特异性，所以其背景优先。

您可以通过使用!important解决此问题，但这可能不是最佳解决方案。

最可靠的是，如果父元素也有一个ID，那么你可以选择#parent-element>.blue-selected并获得更高的特异性。

来源

2013-04-11 22:05:58

ID选择器具有更高的优先级，然后是类选择器。你可以在你的css代码中使用important。

来源

2013-04-11 22:06:19 Novelist

按钮将不会改变颜色（HTML5）

回答

相关问题