单击时更改多个按钮颜色

VSherr 发表于 Dev

舍尔

我需要帮助让多个按钮在单击时更改颜色并在第二次单击时返回到以前的颜色。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .choices{
      background-color:#F0F3F4;
      padding:15px 32px;
      display:inline-block;
      font-size:16px;
      font-family:century gothic;
      font-weight:bold;
      margin:6px 4px;
      cursor:pointer;
      border-radius:12px;
      border:2px solid #5D6D7E;
    }

    .choices:hover{
      background:#D0D3D4;
    }
  </style>
  <script>

  </script>
</head>
<body>
  <div>
    <button class="choices" type="button" id="button" >Grapes</button>
    <button class="choices" type="button" id="button">Bananas</button>
    <button class="choices" type="button" id="button">Strawberries</button>
    <button class="choices" type="button" id="button">Apples</button>
  </body>
</html>

我对 javascript 不是很有经验，所以我想我只需要帮助弄清楚如何使用 javascript 来解决问题。

丹尼尔·阿卜杜勒萨米德

也许您想使用复选框 html 输入标记而不是按钮

<input type="checkbox" id="grapes" value="grapes" name="fruit"/>
<label for="grapes">
    <div class="choices">Grapes</div>
</label>

根据您的要求，这里是一种 javascript 方法。

<button class="choices" onClick="buttonClick(this)">Grapes</button>
<script>
    function buttonClick(element){
        element.classList.toggle('active');
    }
</script>

然后，当按钮处于活动状态时，您可以将活动类设置为您想要的任何样式

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。