CODEWITHSUNDEEP
javascriptcssforeachthis
pjk_ok
pjk_ok

Reputation: 967

Remove Class From All Elements Except Active Element

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>

Upvotes: 3

Views: 2655

Answers (4)

Richard
Richard

Reputation: 7433

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>

Upvotes: 1

BadPiggie
BadPiggie

Reputation: 6379

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

Upvotes: 2

William Torres
William Torres

Reputation: 54

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>

Upvotes: 0

1nt3rC0nn3ct3d
1nt3rC0nn3ct3d

Reputation: 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>

Upvotes: 0

Related Questions