0

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>

0

2 respuestas 2

1

Si te he entendido bien querrías algo así:

  1. Si el elemento pulsado contiene la clase active se la quitamos
  2. Si no la tiene primero quitamos la clase active a todos los elementos y luego se la añadimos a la pulsada.

var header = document.getElementsByClassName("custom-top-icons");
var icons = header[0].getElementsByClassName("content-icons");

for (let i = 0; i < icons.length; i++) {
  icons[i].addEventListener("click", function() {
  
  if(this.classList.contains("active")){
    this.classList.remove("active");
  }
  else{
  //Borramos de todos los elementos la clase "active"
   for (let i = 0; i < icons.length; i++) {
     icons[i].classList.remove("active");
   }
   //Se la añadimos al elemento pulsado
    this.classList.add("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>

1
  • Muchas gracias por tu respuesta me ha servido, justo lo que necesitaba
    – zerokira
    Commented el 1 mar. 2019 a las 21:55
0

Yo lo haría con jQuery de una forma más rápida y fácil, Demo

$(".content-icons").click(function(){
   $(".content-icons").removeClass('active');
   $(this).addClass('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>

4
  • 2
    Cuidado con el contexto, this no hace referencia al elemento clickeado, debe leer más sobre arrow functions
    – Dev. Joel
    Commented el 1 mar. 2019 a las 20:35
  • La arrow function la puse como ejemplo pero ese código como tal lo he usado mucho para la pregunta que se esta haciendo y me ha funcionado con el this Commented el 1 mar. 2019 a las 20:36
  • ¿Podrías poner un snippet que funcione? Sería mucho más útil y claro :)
    – Kiko_L
    Commented el 1 mar. 2019 a las 20:46
  • Mira acá, realmente lo que dive @Dev.Joel es verdad con el arrow function no sirve el $(this) codepen.io/dmsanchez86/pen/xBVbGz Commented el 1 mar. 2019 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.