How to ensure only one tab is coloured upon clicking?

Question

I'm trying to write a function such that when you click a tab (created using bootstrap) it changes to a gold color. This bit works fine, however, I want to toggle the active property of each tab (bootstrap) so that it's on to give a nice white outline. The issue is unless you click on the same tab again, it stays white. Any ideas? Thanks.

This is my work so far:

let timesClicked = 1;

let navItems = document.querySelectorAll('.changeColor');
navItems.forEach(item => {
  item.addEventListener("click", () => {
    timesClicked++;
    console.log(timesClicked);
    let previousItem = item;
    if (timesClicked % 2 == 0) {
      item.style.color = "#f0a500";
      item.classList.toggle('active');
      console.log(item);
    } else {
      previousItem.classList.toggle('active');
      console.log(previousItem);
    };

    navItems.forEach(otherItem => {
      if (otherItem !== item) {
        otherItem.style.color = "#1A1C20";
        /*
        item.addEventListener("click", () =>
          item.classList.toggle('active'));
       ;*/
      };
    });

  });
})





  
    Mathematics
  
  
    English
  
  
    Verbal
  
  
    Nonverbal

user_7994967 · Answer

Based on your code, I did following steps to correct it:

set first tab as the default active one before clicking.
when click on any tab, deactive previous tab, and remember this active one by the variable previousItem(you should declare this variable outside forEach(..)).

let navItems = document.querySelectorAll('.changeColor');
let previousItem = navItems[0];

navItems.forEach(item => {
  item.addEventListener("click", () => {

    if(previousItem == item)return;

    item.style.color = "#f0a500";
    item.classList.toggle('active');

    previousItem.classList.toggle('active');
    previousItem.style.color = "#1A1C20";

    previousItem = item;
 });
})





  
    Mathematics
  
  
    English
  
  
    Verbal
  
  
    Nonverbal

user_13669048 · Answer

You are over complicating your code this can simply be done using querySelectorAll and forEach method.

Just remove the active class and color from all the nav items and then add only to the clicked menu item only using Event.target method

Simplified code Demo:

let navItems = document.querySelectorAll('.changeColor');
navItems.forEach(item => {
  item.addEventListener("click", (e) => {
    navItems.forEach(otherItem => {
      otherItem.style.color = "#1A1C20";
      otherItem.classList.remove('active');
    });
    e.target.classList.add('active');
    e.target.style.color = "#f0a500";
  });
})




  
    Mathematics
  
  
    English
  
  
    Verbal
  
  
    Nonverbal

user_12883974 · Answer

This is my solution to your problem

let navItem = document.querySelectorAll('.changeColor');
function someFunction({ target }) {
  navItem.forEach((element) => {
    element.style.color = '#1A1C20';
    element.classList.remove('active');
  });
  target.style.color = '#f0a500';
  target.classList.toggle('active');
}
navItem.forEach((element) => {
  element.addEventListener('click', (e) => someFunction(e));
});

How to ensure only one tab is coloured upon clicking?

3 Answers