javascript - 我想在单击后更改按钮的背景颜色，并在单击另一个按钮后再次更改为原始颜色

Question

我正在做 asp.net/c# 选项卡，包括一个按钮。单击后我想更改按钮的颜色，单击另一个按钮后我想更改其他按钮的颜色，第一个按钮将具有旧颜色，我在事件状态下使用了一个类，但它会更改它 1 秒.

这是我的 asp.net 代码:

 <div>
     <input type="button" id="t1" class="button" onclick="setColor('tab1', 0)" value="b 1">
     <input type="button" id="t2" class="button" onclick="setColor('tab2', 1)" value="b 2" >
     <input type="button" id="t3" class="button" onclick="setColor('tab3', 2)" value="b 3">
</div>

这是 JavaScript。当我执行 window.location.href 时，它再次显示默认颜色。

<script type="text/javascript">
function setColor(btn, par) {
    if (par ==  0) {
        window.location.href = "Default.aspx";
        document.getElementById("tab1").style.backgroundColor = "#ff0000";
        document.getElementById("tab2").style.backgroundColor = "#00bcd4";
        document.getElementById("tab3").style.backgroundColor = "#00bcd4";  
    } else if (par == 1) {
        window.location.href = "Default2.aspx";
        document.getElementById("tab1").style.backgroundColor = "#00bcd4";
        document.getElementById("tab2").style.backgroundColor = "#ff0000";
        document.getElementById("tab3").style.backgroundColor = "#00bcd4";
    } else if (par == 2) {
        window.location.href = "Default3.aspx";
        document.getElementById("tab1").style.backgroundColor = "#00bcd4";
        document.getElementById("tab2").style.backgroundColor = "#00bcd4";
        document.getElementById("tab3").style.backgroundColor = "#ff0000";
    }
}
</script>

Answer 1

这可以通过简单的 CSS 规则来完成，根本不需要 JavaScript。

I have used Cascading style sheet class on active but it will change it for 1 sec.

您的问题是您尝试了 :active 伪类(对于按钮，仅在按钮被“主动”单击时适用)而不是 :focus 伪类。

.button { background-color:aqua; }  /* default color for all buttons */
.button:focus { background-color: rgba(255, 75, 75, .5); }

<div class="btn-group">
  <input type = "button" id="tab1" class="button" value ="button 1">
  <input type = "button" id="tab2" class="button" value ="button 2">
  <input type = "button" id="tab3" class="button" value ="button 3">
</div>

要保持按钮的“焦点”颜色，即使它失去对另一个非按钮元素的焦点，您需要为每个添加相同类的按钮设置一个 click 事件处理程序单击的按钮并将其从所有其他按钮中删除:

// Get all the relevant buttons into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".button"));

// Loop through the buttons
buttons.forEach(function(btn){

  // Set up a click event handler for the button
  btn.addEventListener("click", function(){
    // Loop though all the buttons and reset the colors back to default
    buttons.forEach(function(btn){ btn.classList.remove("focus"); });
    this.classList.add("focus"); // Add the class to the one button that got clicked
  });
  
});

.button { background-color:aqua; }  /* default color for all buttons */
.focus { background-color: rgba(255, 75, 75, .5); }

<div class="btn-group">
  <input type = "button" id="tab1" class="button" value ="button 1">
  <input type = "button" id="tab2" class="button" value ="button 2">
  <input type = "button" id="tab3" class="button" value ="button 3">
</div>

<p>Other things to click on:
  <input type = "text" value ="button 1">
  <input type = "button" value ="button 2">
  <input type = "radio" value ="button 3">
</p>