0

¿Cómo puedo dejar activado (active) un link (<a>) con JavaScript?

Mi código HTML

<div id="marco2">
    <a href="#" onclick="play1();"  class="myButton">A-1</a>
    <a href="#" onclick="play2();" class="myButton2">A-2</a>
    <a href="#" onclick="play3();" class="myButton3">A-3</a>
</div>

Css

.myButton:active,.myButton2:active,.myButton3:active {
    position:relative;
    top:-9px;
    background: linear-gradient(to bottom, #bbbbbb 5%, #bbbbbb 100%);
    background-color: #aaaaaa;
}
2
  • Puedes lanzar un evento mousedown con ese elemento como target... en teoría eso debería marcarlo como :active hasta que se encuentre el evento mouseup correspondiente. Pero... dudo que eso sea muy estable especialmente en diferentes navegadores. Por no hablar de que un click en otra parte te lo eliminaría. Lo que suele hacerse en estos casos es añadir una clase .active, eso si que es fácil de añadir y quitar con javascript, es compatible con todos los navegadores y no da problemas.
    – Benito-B
    Commented el 3 abr. 2021 a las 20:18
  • Gracias por responder! Commented el 4 abr. 2021 a las 1:08

1 respuesta 1

2

Te recomiendo no trabajar con pseudo-clases ya que la comunidad tiene otras prácticas. Lo estándar, es pintar la selección de un elemento con una clase CSS y controlarlo con Javascript.

Visita el enlace para que tengas otra visión de lo que te comento: https://www.w3schools.com/howto/howto_js_active_element.asp

2
  • Gracias por responder! justamente estaba haciendo eso despues de divagar por las redes buscando informacion. Commented el 4 abr. 2021 a las 1:11
  • Genial! Este tipo de buenas prácticas te servirán de mucho cuando empieces a trabajar con React, Angular o Vue. W3Schools contiene muchos cursos básicos pero que te presentan buenas prácticas o convenciones, por favor, siempre usa las documentaciones de Mozilla o W3 como referencias para partir, una vez entendido el proceso, se libre de experimentar. Buena suerte en el viaje!
    – Devandmus
    Commented el 4 abr. 2021 a las 1:57

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.