0

我有三个按钮，它们的作用很像单选按钮 - 一次只能选择一个：

<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');
});

当我单击其中一个按钮时，会出现控制台日志消息，但背景颜色保持不变。我究竟做错了什么？这是小提琴。

4

3 回答 3

2

我会解决一些问题。

使用类而不是 ID 定位。我留下了 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-11T22:10:56.700 回答
1

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

你可以通过使用来解决这个问题!important，但这可能不是最好的解决方案。

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

于 2013-04-11T22:05:58.187 回答
1

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

于 2013-04-11T22:06:19.883 回答