如何在 css3 中创建活动按钮

How to create active buttons in css3?

本文关键字：创建活动 按钮 css3      更新时间：2023-09-26

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

.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");
        }

根据有效的标记编写，您不应该对单个文档中的多个元素使用相同的 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" />

相关文章：