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
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
function changeClass(elem, className1,className2) { var linkurl = elem.getAttribute('href'); var current = window.location.href; if(current.indexOf(linkurl) != -1) { elem.className = className1; } else { elem.className = className2; } }
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!!!