How to do color toggling of links with the click of the user?

var links = document.querySelectorAll('ul.tabs-title li');

function ativar() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove('current');
    }
    this.classList.add('current');
}

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', ativar);
}

Example: link

So this idea is divided into 3 parts:

• Select all elements to click

• Define a function that executes in the click

And here in this function all <li> is moved to remove the current class and then add only the one in which you clicked.

• add the event dropper that calls the ativar function when the li element receives a click

I used the HTML in the link that you put in the question.