Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/03/2011, 06:20
Jarkaos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Suecia
Mensajes: 253
Antigüedad: 21 años, 5 meses
Puntos: 2
Jquery: Cambiar color a menu cuando esta activo

Hola,

Estoy intentando hacer un script con jquery que me permita agregar una classe a un elemento en un menu cuando éste este activo.

Este es el html, es bastante simple:
Código HTML:
<div id="menu">
<ul>
<li><a href="pagina1.html">pagina 1</a></li>
<li><a href="pagina2.html">pagina 2</a></li>
<li><a href="pagina3.html">pagina 3</a></li>
</ul>
</div> 
Para especificar el color del elemento que esta activo utilizo esta clase:

.selected {background: #fff;}

Y mi script se ve asi:
Código PHP:
$(document).ready(function () {
$(
"#menu a").click(function() {
var 
path this.getAttributes('href');

$(
"#menu a").removeClass('selected');
$(
this).toggleClass('selected');
});
}); 
Ok, el problema con este script es que como estoy usando .click la clase no se mantiene en el elemento una vez que la pagina ha cargado, es decir, cuando hago click en el elemento se agrega la clase 'selected' y me muestra el fondo blanco pero cuando la pagina termina de cargar la clase es removida del elemento y 'este vuelve a su estado original.

Hize una prueba con javascript comun y corriente el cual funciona perfectamente pero no se como 'traducir' ese script a jquery.

script normal:
Código PHP:
function addLoadEvent(func) {
    var 
oldonload window.onload;
    if(
typeof window.onload != 'function') {
        
window.onload func;
    } else {
        
window.onload = function() {
            
oldonload();
            
func();
        }
    }
}

function 
insertAfter(newElementtargetElement) {
    var 
parent targetElement.parentNode;
    if(
parent.lastChild == targetElement) {
        
parent.appendChild(newElement);
    } else {
        
parent.insertBefore(newElementtargetElement.nextSibling);
    }
}

function 
addClass(elementvalue) {
    if(!
element.className) {
        
element.className value;
    } else {
        
newClassName element.className;
        
newClassName+= " ";
        
newClassName+= value;
        
element.className newClassName;
    }
}

function 
highlightPage() {
    if (!
document.getElementsByTagName) return false;
    if (!
document.getElementById) return false;
    if (!
document.getElementById("menu")) return false;
    var 
nav document.getElementById("menu");
    
    var 
links nav.getElementsByTagName("a");
    for (var 
i=0i<links.lengthi++) {
        var 
linkurl links[i].getAttribute("href");
        var 
currenturl window.location.href;
        
        if(
currenturl.indexOf(linkurl) != -1) {
            
links[i].className "selected";
        }
    }
}

addLoadEvent(highlightPage); 
Alguna ayuda porfavor, gracias.