有多个按钮。同时使用 :active 状态答案

【问题标题】：Having multiple buttons. Using :active state at the same time有多个按钮。同时使用 :active 状态
【发布时间】：2021-11-29 09:07:02
【问题描述】：

.a {
  background-color: white;
}

.a:focus {
  background-color: green;
}

.b {
  background-color: yellow;
}

.b:focus {
  background-color: blue;
}

<button class="a">1</button>
<button class="a">2</button>
<button class="b">3</button>
<button class="b">4</button>

我怎样才能做到这一点，当我点击一个按钮时，它的 :focus 状态不会消失，除非我点击同一个类的按钮？例如在上面的代码中，如果我点击 1，它会变成绿色。如果我点击 3，1 将是绿色，3 将是蓝色。但是如果我点击 2 而不是 3，1 会变回白色，2 会变绿

首选解决方案：在 html 或 css 中

【问题讨论】：

我不确定您想要实现什么，但看起来您正在尝试复制输入 type=radio 功能，但使用按钮标签。也许您需要的是使用带有type=radio 的输入，然后将关联标签设置为按钮并使用:checked 伪类而不是:focus，使用具有相同name 的无线电（而不是相同的@ 987654328@) 应该做你想做的事。

标签： html css button pseudo-class

【解决方案1】：

正如上面arieljuod's comment 中提到的，<input> elements of type radio 按照您的描述工作。您可以通过“为组中的每个 [the] 单选按钮提供相同的 name”来 define a radio group。

如果您不限于使用<button>、class 和:focus，您可以使用<input type="radio">、name 和:checked，以及<label> 以帮助将它们设置为按钮样式。

注意adjacent sibling combinator +，仅当<span> 紧跟检查输入时才匹配。

.radio-button input {
  display: none;
}

.radio-button span {
  padding: 0.1em 0.6em;
  background-color: rgb(239, 239, 239);
  border: 2px outset rgb(118, 118, 118);
  text-align: center;
}

.radio-button input[name="a"]:checked + span {
  background-color: green;
}

.radio-button input[name="b"]:checked + span {
  background-color: blue;
}

.radio-button input[name="c"]:checked + span {
  background-color: red;
}

<label class="radio-button">
  <input type="radio" name="a">
  <span>a1</span>
</label>
<label class="radio-button">
  <input type="radio" name="a">
  <span>a2</span>
</label>
<label class="radio-button">
  <input type="radio" name="b">
  <span>b1</span>
</label>
<label class="radio-button">
  <input type="radio" name="b">
  <span>b2</span>
</label>
<label class="radio-button">
  <input type="radio" name="b">
  <span>b3</span>
</label>
<label class="radio-button">
  <input type="radio" name="c">
  <span>c1</span>
</label>
<label class="radio-button">
  <input type="radio" name="c">
  <span>c2</span>
</label>

另见：
How to Style a Selected Radio Buttons Label?

【讨论】：

【解决方案2】：

这是一个JavaScript的解决方案，如果你点击1会变成绿色，如果你点击2会变成白色，然后2会变成绿色

var buttonA = document.querySelector(".a");
var buttonB = document.querySelector(".b");
var buttonC = document.querySelector(".c");
var buttonD = document.querySelector(".d");
buttonA.style.backgroundColor = "white";
buttonB.style.backgroundColor = "white";
buttonC.style.backgroundColor = "yellow";
buttonD.style.backgroundColor = "yellow";
buttonA.addEventListener("click", function() {
  if (buttonA.style.backgroundColor == "white") {
    buttonA.style.backgroundColor = "green";
  } else if (buttonA.style.backgroundColor == "green") {
    buttonA.style.backgroundColor = "white";
  } else {
    buttonA.style.backgroundColor = "white";
  }
});
buttonB.addEventListener("click", function() {
  if (buttonB.style.backgroundColor == "white" && buttonA.style.backgroundColor == "green") {
    buttonB.style.backgroundColor = "green";
    buttonA.style.backgroundColor = "white";
  } else if (buttonB.style.backgroundColor == "white") {
    buttonB.style.backgroundColor = "green";
  } else if (buttonB.style.backgroundColor == "green") {
    buttonB.style.backgroundColor = "white";
  } else {
    buttonB.style.backgroundColor = "white";
  }
});
buttonC.addEventListener("click", function() {
  if (buttonC.style.backgroundColor == "yellow") {
    buttonC.style.backgroundColor = "blue";
  } else if (buttonC.style.backgroundColor == "blue") {
    buttonC.style.backgroundColor = "yellow";
  } else {
    buttonC.style.backgroundColor = "yellow";
  }
});
buttonD.addEventListener("click", function() {
  if (buttonD.style.backgroundColor == "yellow") {
    buttonD.style.backgroundColor = "blue";
  } else if (buttonD.style.backgroundColor == "blue") {
    buttonD.style.backgroundColor = "yellow";
  } else {
    buttonD.style.backgroundColor = "yellow";
  }
});

<button class="a">1</button>
<button class="b">2</button>
<button class="c">3</button>
<button class="d">4</button>

【讨论】：