Add class on non selected element

Add class on non selected element with pure js

by Abhay Singh

HTML

<ul class="nav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

li.active {
    color: red;
}

JavaScript

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.add('active');
    
    this.classList.remove('active');
};

for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('mousedown', makeActive);
    }