hyperlink - quitar - Cambiar el color de un enlace seleccionado que está incrustado en una tabla
link color (3)
¿Hay un error o simplemente no pasa nada? Un buen primer paso si eres un principiante de javascript es usar una herramienta como Firebug para ver los mensajes de error detallados, y puedes agregar en las instrucciones console.log para ver qué pasa mientras ejecutas tu código.
Intento utilizar los nombres de las clases para cambiar el color de un enlace después de haberlo seleccionado, de modo que seguirá siendo el nuevo color, pero solo hasta que se seleccione otro y luego vuelva a cambiar.
Estoy usando este código que fue publicado por Martin Kool en esta pregunta:
<html>
<head>
<script>
document.onclick = function(evt) {
var el = window.event? event.srcElement : evt.target;
if (el && el.className == "unselected") {
el.className = "selected";
var siblings = el.parentNode.childNodes;
for (var i = 0, l = siblings.length; i < l; i++) {
var sib = siblings[i];
if (sib != el && sib.className == "selected")
sib.className = "unselected";
}
}
}
</script>
<style>
.selected { background: #f00; }
</style>
</head>
<body>
<a href="#" class="selected">One</a>
<a href="#" class="unselected">Two</a>
<a href="#" class="unselected">Three</a>
</body>
Funciona bien hasta que intento sacar los enlaces en una tabla. ¿Por qué es esto? Sé fácil, soy un principiante.
No hay ningún error, los enlaces están cambiando a la clase "seleccionada", pero cuando se selecciona otro enlace, los enlaces antiguos mantienen la clase "seleccionada" en lugar de cambiar a "no seleccionada". Básicamente, por lo que puedo decir, funciona como un atributo vlink, que no es lo que estoy buscando.
Y sí, los enlaces están en diferentes celdas, ¿cómo sugerirías que cambie el código para que funcione correctamente?
De acuerdo, de hecho, hablé demasiado pronto.
document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == ''unselected'')
{
var links = document.getElementsByTagName(''a'');
for (var i = links.length - 1; i >= 0; i--)
{
if (links[i].className == ''selected'')
links[i].className = ''unselected'';
}
el.className = ''selected'';
}
return false;
}
Este código que me diste funciona muy bien, visualmente, hace exactamente lo que quiero que haga. Sin embargo, hace que mis enlaces dejen de funcionar ... Cambian de color, pero no se vinculan a nada, y cuando elimino el script, funcionan bien. ¿Qué estoy haciendo mal / qué tengo que cambiar para que esto funcione?
Además, quiero hacer lo mismo en otro sitio de mi sitio web, donde los enlaces están todos en una etiqueta <div> , separados por etiquetas <p> . ¿Cómo puedo hacer que esto funcione?
Estás recorriendo a los hermanos. Si los enlaces están en <td> separados, ya no son hermanos.
Puede recorrer todos los enlaces como este:
document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == ''unselected'')
{
var links = document.getElementsByTagName(''a'');
for (var i = links.length - 1; i >= 0; i--)
{
if (links[i].className == ''selected'')
links[i].className = ''unselected'';
}
el.className = ''selected'';
}
return false;
}
También agregué un return false; al final de la función para evitar que vayas a ''#''
Por ''en tablas'' ¿te refieres a poner cada enlace en su propia celda? Porque eso haría esta línea:
var siblings = el.parentNode.childNodes;
no puede seleccionar otros enlaces fuera de la celda. Tendría que buscar otra forma de señalar qué elemento es el contenedor de enlace.