Remove Class From All Elements Except Active Element

Question

I have a set of anchor tags that I am adding an active class to via a forEach method. How do I get it so when I add the active class to one anchor tag, it removes this active class from all other anchor tags items?

I must also have it so the 1st anchor tag starts with an active class on it (which I have done via CSS)

CodePen: https://codepen.io/emilychews/pen/gOaXdMr

 var tabLink = document.querySelectorAll('.tab-link'), tabPane = document.querySelectorAll('.tab-pane') tabLink.forEach(function(item){ item.addEventListener('click', function(){ item.classList.add('active') }, false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: .2s; display: block; }.tab-link.active { background: white; }

 <ul class="nav-tabs"role="tablist"> <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li> <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li> <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li> </ul>

Answer 1

If you use jQuery , You can do this using few lines of code.

Vanilla JS

var tabLink = document.querySelectorAll('.tab-link');

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        document.querySelector('.active').classList.remove('active');
        item.classList.add('active');
    }, false)

})

jQuery

$(document).on('click', '.tab-link', function(){
  $('.tab-link').removeClass('active'); // remove active for all first.
  $(this).addClass('active'); // add active for clicked element
})

Answer 2

Inside the click event listener, you can simply remove all the active classes from all the children elements inside .tab-link before adding the last active class to the clicked element.

I only added three lines of code below to your original code to achieve what you wanted.

 var tabLink = document.querySelectorAll('.tab-link'), tabPane = document.querySelectorAll('.tab-pane') tabLink.forEach(function(item){ item.addEventListener('click', function(){ tabLink.forEach(function(item) { item.classList.remove('active') }) item.classList.add('active') }, false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: .2s; display: block; }.tab-link.active { background: white; }

 <ul class="nav-tabs"role="tablist"> <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li> <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li> <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li> </ul>

Answer 3

so basically just give each on a different id then in the function just remove the class from each and than add the class.

 var tabLink = document.querySelectorAll('.tab-link'), tabPane = document.querySelectorAll('.tab-pane') tabLink.forEach(function(item){ item.addEventListener('click', function(){ document.getElementById('a').classList.remove('active'); document.getElementById('b').classList.remove('active'); document.getElementById('c').classList.remove('active'); item.classList.add('active') }, false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: .2s; display: block; }.tab-link.active { background: white; }

 <ul class="nav-tabs"role="tablist"> <li role="presentation"><a id='a' class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li> <li role="presentation"><a id='b' class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li> <li role="presentation"><a id='c' class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li> </ul>

Answer 4

I created a second function that will be called in the click event. That function search for a item where has the class active and remove the class.

 var tabLink = document.querySelectorAll('.tab-link'), tabPane = document.querySelectorAll('.tab-pane') function clearActiveItemMenu(){ tabLink.forEach(function(item){ if(item.classList.contains('active')){ item.classList.remove('active'); } }); } tabLink.forEach(function(item){ item.addEventListener('click', function(){ clearActiveItemMenu(); item.classList.add('active') }, false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: .2s; display: block; }.tab-link.active { background: white; }

 <ul class="nav-tabs"role="tablist"> <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li> <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li> <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li> </ul>