Javascript OnClick cambia el color del enlace de varios elementos

Estoy buscando cambiar el enlace del otro enlace cuando se hace clic en ellos. Entonces, por ejemplo, si el usuario hace clic en AZ, cambiaría el color de 0-9.

<a href="" id="list_users_title" onclick="document.getElementById('oneline a').style.color = '#414042'; document.getElementById('list_users_title a').style.color = '#B91200';">A-Z</a>
<a href="" id="oneline" onclick="document.getElementById('oneline a').style.color = '#B91200'; document.getElementById('list_users_title a').style.color = '#414042';">0-9</a>

Puedo hacerlo con el color, sin embargo, esto anula el a: hover que todavía me gustaría usar.

Cualquier ayuda sería apreciada

preguntado el 12 de junio de 12 a las 21:06

2 Respuestas

su problema es que, con la ayuda de javascript, está agregando css en línea al a etiqueta. CSS en línea tiene más prioridad que el que está en style etiqueta.

Aquí la solución-

<div id='style'></div>

<a href="" id="list_users_title" onclick="document.getElementById('style').innerHTML = '<style>ADD CSS HERE</style>';">A-Z</a>

esto no agregará css en línea

Respondido el 12 de junio de 12 a las 22:06

Cuando se utiliza getElementById deberías estar pasando en el id del elemento que desee. Entonces haz algo como esto document.getElementById('oneline') en lugar de document.getElementById('oneline a').

EDITAR

Si no desea anular los estilos, use el evento onclick para agregar una clase (digamos, "clic por línea") al elemento en lugar de aplicar estilos directamente. Luego use hojas de estilo para definir algunas reglas como esta:

#oneline.clicked-by-oneline { color: #414042; }
#list_users_title.clicked-by-oneline { color: #B91200; }

Use la cascada para controlar exactamente cómo interactuarán estas anulaciones de estilo.

Respondido el 12 de junio de 12 a las 22:06

¿Cómo diseñaría el color a:link en lugar del color del elemento? - Tormenta3y

Probablemente aplicaría una clase al elemento, luego usaría CSS para controlar los estilos en lugar de aplicar estilos directamente. - Scizzzo

También tu a la etiqueta ya tiene la identificación 'oneline', por lo que document.getElementById('oneline') ya se refiere al ancla. - Scizzzo

Hola, hacerlo como document.getElementById('oneline') establece el color del elemento y anula el a:hover a:visited - Tormenta3y

Este es el comportamiento correcto, dado su código, por lo que sugeriría usar clases y CSS. - Scizzzo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.