Tengo una estructura HTML como:
<a class="parent-element"> <h2 class="link1">link</h2> </a> <a class="parent-element"> <h2 class="link2">link</h2> </a> <a class="parent-element"> <h2 class="link3">link</a> </a>Quiero agregar la clase al elemento principal para el enlace en el que se hizo clic y, por ejemplo, hago clic en el "enlace1", luego cambio el fondo de su padre y luego, cuando hago clic en el "enlace2", agrego la clase a "enlace2" y elimino de "enlace1"
estaba intentando con:
$(".parent-element").addClass("myClass");Pero, está lejos de lo que quiero conseguir :)
¡Gracias por adelantado!
Use this palabra clave para agregar clase al elemento actual.
$(".parent-element").click(function() { $(".parent-element").removeClass("active"); $(this).addClass("active"); }) .active{ color: hotpink; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="parent-element"> <h2 class="link1">link</h2> </a> <a class="parent-element"> <h2 class="link2">link</h2> </a> <a class="parent-element"> <h2 class="link3">link</h2> </a>puedes probar esto-
$(".parent-element").click(function() { $(".parent-element").removeClass("myClass"); $(this).addClass("myClass"); }) .myClass { color: red; } <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <a class="parent-element"> <h2 class="link1">link</h2> </a> <a class="parent-element"> <h2 class="link2">link</h2> </a> <a class="parent-element"> <h2 class="link3">link </a>puede apuntar al padre con event.target.parentNode.classList.add ("clic") pero con su código actual, no necesita apuntar al padre o usar js para cambiar el color. Debido a que la etiqueta es el elemento en el que se puede hacer clic (no h2) y cuando hace clic en él, el navegador conoce el evento, el elemento de destino, etc. Simplemente puede crear una clase css como
a.parent-element:visited { color: green; }entonces, ni siquiera necesitas js para eso