Question

我使用以下代码来获取某些按钮。但是我希望从开始其中一个活动开始，当我点击其他时变为非活动状态并且新按钮处于活动状态。

CSS

#button-switch
{
    background-size: cover;
    border-radius: 106px;
    height: 70px;
    width: 70px;
}
#button-switch:active
{
    background-size: cover;
    border-radius: 106px;
    height: 90px;
    width: 90px;
}

HTML

<input id="button-switch" class="first" name="pic0" type="button" value="" onclick="pic0()" style="background-image: url(img/colors/grey.png); "/>

<input id="button-switch" class="first" name="pic1" type="button" value="" onclick="pic1()" style="background-image: url(img/colors/blue.png); "/>

JS

function pic0()
        {
            document.getElementById("img").src = "img/cars/grey.jpg";
            $('#carTitle').text('Grey').css("color", "#023042");
            $('#carCopy').text('tech').css("color", "#5e686d");
        }
        function pic1()
        {
            document.getElementById("img").src = "img/cars/blue.jpg";
            $('#carTitle').text('Blue').css("color", "#419dda");
            $('#carCopy').text('tech').css("color", "#5e686d");
        }

Answer 1

根据有效的标记编写，您不应对单个文档中的多个元素使用相同的ID。所以你可以改变这样的一点：

<input class="button-switch first" name="pic0" type="button" value="Switch button" />
<input class="button-switch first" name="pic1" type="button" value="Switch button" />

以这种方式更改了css类：

.button-switch.active {
  border-radius: 106px;
  height: 90px;
  width: 90px;
  background:blue;
  color:white;
}

我用它作为类名而不是我想写一些不引人注目的javascript而是用这个：

$('.button-switch').on('click', function() {
  $(this).addClass('active').siblings('.button-switch.first').removeClass('active');
});

$('.button-switch').on('click', function() {
  $(this).addClass('active').siblings('.button-switch.first').removeClass('active');
});

.button-switch {
      border-radius: 106px;
      height: 70px;
      width: 70px;
    }
    .button-switch.active {
      border-radius: 106px;
      height: 90px;
      width: 90px;
      background:blue;
      color:white;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input class="button-switch first" name="pic0" type="button" value="Switch button" />

<input class="button-switch first" name="pic1" type="button" value="Switch button" />

如何在css3中创建活动按钮？

1 个答案: