identificar menu activo

prograficion · #1 (**permalink**) 10/08/2009, 15:37

Hola de nuevo comunidad.

Ahora vengo con algo que no se ni por donde!

No dudo que sea algo muy simple, pero no encuentro la manera de hacerlo.

lo que trato de hacer es decirle mediante un color de fondo al usuario en que seccion de la pagina esta.
por ejemplo: cuando entras a la pagina, por defecto viene marcada la primer opcion (Home), pero quiero que cuando el usuario de click en (Contacto) me desmarque el Home y me marque como activa la seccion Contacto.

Tengo lo siguiente:

Código:

<div class="menu">
<ul>	
<li><a class="current" href="http://www.prograficion.net/">Homepage</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Utilidades</a></li>
<li><a href="http://www.prograficion.net/about/">About</a></li>
<li><a href="#">Colabora</a></li>
<li><a href="http://www.prograficion.net/contacto/">Contacto</a></li>
</ul>
</div>

y con el sig. codigo jquery pienso hacerlo:

Código:

$(".menu ul li a").click(function() {
$(".menu ul li a").removeClass();
$(this).addClass("current");
});

Y si! hace lo que tiene que hacer. cuando doy click en contacto me marca como activa contacto, pero cuando me carga la pagina de contacto, vuelve a estar seleccionada la seccion Home, y no contacto.

Nota: Mis conocimientos tambien habarcan JavaScript, y algo de PHP, por lo que si hay una manera de hacerlo con alguno de estos otros lenguaje esta bien.

Alguna idea de como solucionarlo?

ceSharp · #2 (**permalink**) 11/08/2009, 01:25

Hola prograficion,

intenta hacerlo con parámetros en la url (o querystring, o como narices se le llame a eso!). cuando cargues el menú de cursos, utilidades y tal y cual recoge la variable de la url y, en función de la que sea, marcas una opción u otra.
yo de jquery ni papa... en javascript puedes capturar los parametros de la URL con location.search.substr(1) y luego haces un split para separar valores, etc.

salu2

prograficion · #3 (**permalink**) 11/08/2009, 14:03

mmm.
gracias por tu respuesta.
puedes poner un ejemplo practico (codigo) de lo que dices.

Me quedó claro la idea, pero no muy bien el como hacerlo.

Saludos

ceSharp · #4 (**permalink**) 12/08/2009, 01:20

vamos a ver,
previamente le damos un identificador a cada elemento de tu lista y el link que apunta a la página de contacto lo pasamos con el parámetro 'marcado' con el valor 'contacto':
<ul>
<li><a class="current" href="http://www.prograficion.net/">Homepage</a></li>
<li id="li_cursos"><a href="#">Cursos</a></li>
<li id="li_utilidades"><a href="#">Utilidades</a></li>
<li id="li_about"><a href="http://www.prograficion.net/about/">About</a></li>
<li id="li_colabora"><a href="#">Colabora</a></li>
<li id="li_contacto"><a href="http://www.prograficion.net/contacto/contacto.html?marcar=contacto">Contacto</a></li>
</ul>

No sé como se llama tu página principal de contacto, en este caso la he denominado 'contacto.html'. Al cargar la página llamamos a un método que rescata el parámetro que hemos creado y valora qué opción debe marcar:

<body onload="bucarParametro();".....>

//metodo js para localizar el parámetro
function buscarParametro()
{
var queryString = location.search.substr(1); /*esta variable rescata todos los parámetros pasados en la URL --> marcar=contacto*/
var valorParametro = queryString.split('='); /*troceamos el parámetro para obtener lo que va detrás del igual --> valorParametro[0]='marcar', valorParametro[1]='contacto'

if(valorParametro[1]=='contacto')
document.getElementById('li_contacto').style.backg roundColor = 'lime';
/*en este caso solo preguntamos por si el parámetro es igual a 'contacto'. si así es pinta de color lima el elemento de la lista que previamente le hemos dado un id*/
}

espero que te haya quedado más claro así. para cada elemento de tu lista deberías de preguntar en el if para pintar o no del color que quieras dicho elemento. o bueno, lo más lógico en este caso es usar un switch para valorar en cada caso qué hacer.

salu2