Estoy tratando de agregar una clase active
a un elemento, pero necesito que la clase se agregue solo cuando le den click a un elemento de los 3, y si le doy a otro elemento se remueva y se agregue al elemento que le di click.
IMPORTANTE: Si le doy click a un elemento se agrega la clase, y si le vuelvo a dar click a ese elemento se tiene que remover esa clase y asi sucesivamente.
var header = document.getElementsByClassName("custom-top-icons");
var icons = header[0].getElementsByClassName("content-icons");
for (var i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.active {
color: red;
}
<ul class="custom-top-icons">
<li>
<a class="content-icons">primer icono</a>
</li>
<li>
<a class="content-icons">segundo icono</a>
</li>
<li>
<a class="content-icons">tercer icono</a>
</li>
</ul>