I have been working on a function that changes the color of a tab to gold when clicked, which is working fine. However, I also want to toggle the active property of each tab so that it displays a nice white outline. The problem I'm facing is that the white outline remains unless the tab is clicked again. Any suggestions on how to fix this? Thank you.
This is my current code:
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";
};
});
});
})<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link changeColor active" id="mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab"
aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link changeColor black-text-start" id="english-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link changeColor black-text-start" id="verbal-tab" data-toggle="tab" href="#contact" role="tab"
aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link changeColor black-text-start" id="nonverbal-tab" data-toggle="tab" href="#contact" role="tab"
aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>