按鈕將不會改變顏色（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）

回答

相關問題