add/remove class

by slawe

HTML

<ul class="nav">
    <li class="active">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.remove('active');
    
    this.classList.add('active');
};

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