Bueno, he venido aqui a revindicarme. A dar MI solucion al problema, y a aportarlo para todos los que quieran usarlo. Espero que sea lo suficiente como para que mik me perdone, ja! Bueno, aqui vamos...
Imaginemos que tenemos un menu <ul> con 4 items <li>, cada uno de ellos con 1 id distinto. En el CSS, definimos un clase current para cada li. Imagenemos que los elementos del menu son Nosotros, Portfolio, Experimental, Contacto. El CSS seria algo asi:
Código:
#nosotros.current {...}
#portfolio.current {...}
#experimental.current {...}
#contacto.current {...}
Aparte del resto de las propiedades que le querramos dar a los <li>, pero aca estoy hablando solamente de la clase current de cada uno.
Ahora, aqui viene la parte novedosa del codigo, y es el JS. Seguramente, no es lo más facil, ni lo mas corto (se lia si tienes muchos items en el menu, o muchos submenus, etc... pero en mi experiencia personal, prefiero escribir un par de lineas mas de codigo, que seguir buscando inutilmente algo que se adecue PERFECTAMENTE a mi necesidad), ni lo mas prolijo, pero bueno, es una solucion que funciona en todos los navegadores.
Lo que haremos es crear una funcion de JS para CADA UNA de los <li>. Por lo tanto, si tenemos 4 items <li>, crearemos 4 funciones. En cada una de ella, lo que haremos sera asignar la clase current al item que hemos clickeado, y quitarle la clase current a los otros 3 items (por mas que no la tuviera, pero como nuca sabemos cual de los 4 va a estar pulseado, lo hacemo por las dudas). Las dos primeras funciones seria algo asi...
Código:
function nosotros(){
document.getElementById('nosotros').className = 'current';
document.getElementById('portfolio').className = '';
document.getElementById('experimental').className = '';
document.getElementById('contacto').className = '';
}
function portfolio(){
document.getElementById('portfolio').className = 'current';
document.getElementById('nosotros').className = '';
document.getElementById('experimental').className = '';
document.getElementById('contacto').className = '';
}
Las otras dos son iguales, solo que cambiando el id del li en cuestion,y el nombre de la funcion...
Y ahora, lo unico que falta es aplicarlo al html, de esta forma:
Código HTML:
<ul>
<li id="portfolio"><a href="#" onclick="portfolio()">Portfolio</a></li>
<li id="nosotros"><a href="#" onclick="nosotros()">Nosotros</a></li>
...
</ul>
Y asi con cuantos elementos de menu tengamos.
Repito, no será la solucion más logica, ni mas corta, pero funciona. Y como dijo mikmoro algun mensaje atras, si funciona, esta bien.
Por las dudas, marx... su tienes otro enveto onclick en el <a>, basta con separarlo con un ";", y eso hara que funcionen tranquilamente.
Aca esta mi ejemplo en funcionamiento, en los dos primeros links.
Espero que les sirva, un saludo grande!!
Pablo.