Foros del Web » Programando para Internet » Javascript »

Que esta mal? (colocar nombre de clase en un anchor)

Estas en el tema de Que esta mal? (colocar nombre de clase en un anchor) en el foro de Javascript en Foros del Web. Hola, Estoy intentando cambiar la clase de un <a> para mostrarlo como activo cuando se clickea. Bien lo complicado es que el menu linkea a ...
  #1 (permalink)  
Antiguo 10/12/2010, 12:58
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 22 años, 1 mes
Puntos: 2
Que esta mal? (colocar nombre de clase en un anchor)

Hola,
Estoy intentando cambiar la clase de un <a> para mostrarlo como activo cuando se clickea.

Bien lo complicado es que el menu linkea a diferentes parte de la misma pagina (anchor) y tienen la siguiente forma:
Código HTML:
Ver original
  1. <a href="#anchor1" onclick="changeClass(this,'selected','unselected');">link1</a>
  2. <a href="#anchor2" onclick="changeClass(this,'selected','unselected');">link2</a>

Cuando se carga la seccion correspondiente de la pagina el url toma la siguiente forma:
http://www.pagina.com/pagina.html#anchor1
o
http://www.pagina.com/pagina.html#anchor2

He creado este script para agregar la clase 'selected' al link que se ha clickeado:

Código Javascript:
Ver original
  1. function changeClass(elem, className1,className2)
  2. {
  3.     var linkurl = elem.getAttribute('href');
  4.     var current = window.location.href;
  5.     if(current.indexOf(linkurl) != -1) {
  6.         elem.className = className1;
  7.     } else {
  8.         elem.className = className2;
  9.     }
  10. }

Lo que esta haciendo este script es que cuando la pagina carga por primera vez ningun link tiene la clase 'selected' (lo que esta bien) y la url es:

http://www.pagina.com/pagina.html

Al hacer click en "link1" se muestra en pantalla la seccion correspondiente y la url es

http://www.pagina.com/pagina.html#anchor1

y el link recive la clase 'selected' (hasta ahora sigue bien).
El problema es cuando se hace click en el siguiene link "link2". Despues del primer click se muestra la seccion correspondiente pero el nombre de la clase esta todavia en el link1. Haciendo pruebas cree un alert para saber que url esta en la variable 'current' y para mi sorpresa es todavia la http://www.pagina.com/pagina.html#anchor1 la que esta en la variable.

Al hacer click por segunda vez en el "link2" este recive la clase 'selected' (lo cual esta mal, deberia haberlo recibido cuando se hace el primer click) y el link1 sigue teniendo la clase 'selected' (lo cual tambien esta mal ya que a estas alturas 'link1' ya no esta activo).

Como puedo hacer para que la vriable current tome la nueva url (http://www.pagina.com/pagina.html#anchor2) cuando se hace click en 'link2' pro primera vez?

Ojala que se pueda entender lo que intento hacer

Gracias por la ayuda!!!
  #2 (permalink)  
Antiguo 10/12/2010, 15:17
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Que esta mal? (colocar nombre de clase en un anchor)

a la función le pasas la variable this. ahora con getElementsByTagName o getElementsByName obtienes la colección de todos los links que hay en página. con un ciclo for recorres la colección y comparas cada iteración con la variable this, si devuelve false "unselected" sino "selected"
  #3 (permalink)  
Antiguo 11/12/2010, 03:20
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 22 años, 1 mes
Puntos: 2
Respuesta: Que esta mal? (colocar nombre de clase en un anchor)

IsaBelM, como se dice por aca en Suecia "du är verkligen en pärla", traducido "tu eres realmente una perla".

Funciona perfectamente.

Gracias

Etiquetas: clase, mal, nombre
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:27.