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

Question

i want to change the color of a button ONLY when clicked, and when i click OTHER element i want it to change to its original color, I already get how to change the color, but i dont know what could be the logic to return it back to the original background when I click other button

<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

You'll need to set up an event handler so that when any button gets clicked, all the buttons are reset so that no one of them is active. Then, set the clicked button to be active by styling it. But, instead of setting up multiple handlers, just set up one at the document level that will receive any clicks via bubbling (" event delegation ").

 // 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>

But, you really shouldn't be using hyperlinks if you aren't using them for navigation. That's semantically incorrect and will cause problems for users who rely on assistive technologies for web page access. Instead, any visible element can be made to be clickable by setting up a click event handler for it. But, in your case, since you want "button-like" behavior, why not use the button element? You can style them however you like if you don't like the native presentation.

 // 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 won't do the trick; you'd use that for elements that hold focus like input . Instead, when one of the buttons is clicked, you'll need to go through the other buttons in the collection and reset their colors before setting the color of the clicked button:

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';
  });
});

(The answer using .active is actually better if you have only these buttons. When I read the question, I assumed you'd want to keep one of your buttons colored even when another button, unrelated to this button set, is clicked.)

Answer 3

You have to write onblur event to change the button color back to its original color. So, when you click on other element, onblur event will trigger and change the color.