使用javascript单击时更改按钮的颜色

Question

我只想在单击时更改按钮的颜色，当我单击OTHER元素时，我希望它更改为其原始颜色，我已经知道如何更改颜色，但我不知道当我单击其他按钮时，将其返回到原始背景的逻辑是什么

<div class="button-categories">
<a href="#" class="button-categories-link">Candidates</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Contacts/Guests</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Jobs</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Clients</a>
</div>
<script>
categoriesButton.forEach(function (button, index) {
button.addEventListener('click', function (e) {
this.style.background = '#1976d2';
this.style.color = '#fff';
});
});
</script>

Answer 1

您需要设置一个事件处理程序，以便在单击任何按钮时，所有按钮都会重置，这样就不会有任何按钮处于活动状态。然后，通过设置点击按钮的样式，将其设置为活动按钮。但是，与其设置多个处理程序，不如在document级别设置一个，通过冒泡("事件委派"(接收任何点击。

// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories-link");
// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
// Check to see if it was a button that was clicked
if(evt.target.classList.contains("button-categories-link")){
// Loop over all the buttons & remove the active class
buttons.forEach(function(button){
button.classList.remove("active");
});
// Make the clicked button have the active class
evt.target.classList.add("active");
}
});

.active { background-color:#ff0;  }

<div class="button-categories">
<a href="#" class="button-categories-link">Candidates</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Contacts/Guests</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Jobs</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Clients</a>
</div>

但是，如果你不使用超链接进行导航，你真的不应该使用它们。这在语义上是不正确的，会给依赖辅助技术访问网页的用户带来问题。相反，任何可见元素都可以通过为其设置click事件处理程序来进行点击；按钮状的"；行为，为什么不使用button元素？如果你不喜欢原生演示，你可以随心所欲地设计它们。

// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories");
// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
// Check to see if it was a button that was clicked
if(evt.target.classList.contains("button-categories")){
// Loop over all the buttons & remove the active class
buttons.forEach(function(button){
button.classList.remove("active");
});
// Make the clicked button have the active class
evt.target.classList.add("active");

}
});

button.button-categories {
display:block;
border:none;
background-color:rgba(0,0,0,0);
}
button.button-categories.active { 
background-color:rgba(255,255,0,1); 
}

<button class="button-categories">Candidates</button>
<button class="button-categories">Contacts/Guests</button>
<button class="button-categories">Jobs</button>
<button class="button-categories">Clients</button>

Answer 2

blur不会起作用；你可以将其用于像input这样保持焦点的元素。相反，当单击其中一个按钮时，您需要浏览集合中的其他按钮并重置它们的颜色，然后再设置单击按钮的颜色：

categoriesButton.forEach(button => {
button.addEventListener('click', function (e) {
// Reset all buttons:
const buttons = document.getElementsByClassName('button-categories');
Array.from(buttons).forEach(b => {
b.style.background = 'transparent';
b.style.color = 'auto';
});  
// Apply colors for this button:
this.style.background = '#1976d2';
this.style.color = '#fff';
});
});

(如果你只有这些按钮，使用.active的答案实际上会更好。当我读到这个问题时，我认为即使点击了与这个按钮集无关的另一个按钮，你也会想保持其中一个按钮的颜色。(

Answer 3

您必须编写onblur事件才能将按钮颜色更改回其原始颜色。所以，当您单击其他元素时，onblur事件将触发并更改颜色。