Jquery: Cambiar color a menu cuando esta activo

[Jarkaos]

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(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}
 
function addClass(element, value) {
    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=0; i<links.length; i++) {
        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.

[masterpuppet]

Que tal Jarkaos,

lo que estas mostrando traducido a jquery seria algo asi:

Código Javascript:

function highlightPage(collection, path)
{
    var ppath = path || window.location.href;
    collection.removeClass('selected').each(function(k, v){
        if($(this).attr('href') == ppath) $(this).addClass('selected');                 
    });
}
 
$(document).ready(function () { 
    var links = $('#menu a');
    highlightPage(links);
});
 

lo que no entiendo es para que agregas el evento click al menu, al hacer click si no frenas el evento se recarga la pagina y perdes la clase.

Saludos.