有多個按鈕。同時使用:active狀態

.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 中

uj5u.com熱心網友回復：

正如上面arieljuod 的評論中提到的，radio<input>型別的元素如您所描述的那樣作業。您可以通過“為組中的每個 [the] 單選按鈕提供相同的name”來定義單選組。

如果不限于使用<button>，class以及:focus，你可以使用<input type="radio">，name以及:checked與<label>幫助他們的風格像按鈕。

請注意相鄰的同級組合器 ，<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>

另請參閱：
如何為選定的單選按鈕標簽設定樣式？

uj5u.com熱心網友回復：

這是 JavaScript 的解決方案，如果您點擊 1 它將變為綠色，如果您點擊 2，則 1 將變為白色，而 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>

標籤：html css 按钮 伪类

上一篇：使用簡單的JS函式鏈接onclick按鈕時出現問題

下一篇：如何制作在輸入中添加或減去值的按鈕？