Este blog no iba a ser de temas acerca de programación ni nada de eso, pero es algo que me gusta aprender y practicar y sé que a veces es difícil encontrar soluciones o ideas de cómo resolver algunas cosas, sobre todo cuando apenas estamos aprendiendo.
Los siguientes ejemplos utilizan código Jquery que resuelve de dos formas el aplicar una clase a un elemento para dar el efecto active, veamos cómo funciona
El primer caso es cuando vamos a navegar por una misma página y utilizaremos las id para ir de un punto a otro
En este ejemplo, a pesar de que se vea con varios estilos, en el código solo he dejado lo que nos interesa ver funcionando
En la siguiente barra da click en algún botón para ver el efecto
Codigo html
<ul class="navbar">
<li> <a href="#Inicio">Inicio </a> </li>
<li> <a href="#Cuerpo">Cuerpo </a> </li>
<li> <a href="#Cara">Cara </a> </li>
<li> <a href="#Busto">Busto </a> </li>
<li> <a href="#Galeria">Galeria </a> </li>
<li> <a href="#Testimonios">Testimonios </a> </li>
<li> <a href="#Contacto">Contacto </a> </li>
</ul>
Codigo Jquery
$(function(){
$('.navbar a').click(function(){
$(this).parent().addClass('rojo').siblings().removeClass('rojo') })
});
Como podemos ver esta muy sencillo, pero recalco nuevamente que esto solo funcionara para cuando navegamos dentro de una página
El siguiente caso solo funcionara cuando se recargue la página,en este caso no será posible que vean cómo funciona debido a que blogger evita que se ejecuten algunos scripts, pero les dejo el código para que lo prueben, pueden dejarme sus dudas en los comentarios y a la brevedad tratare de ayudarles a resolver sus dudas.
Codigo html
<ul class="navbar">
<li> <a href="/Inicio">Inicio </a> </li>
<li> <a href="/Cuerpo">Cuerpo </a> </li>
<li> <a href="/Cara">Cara </a> </li>
<li> <a href="/Busto">Busto </a> </li>
<li> <a href="/Galeria">Galeria </a> </li>
<li> <a href="/Testimonios">Testimonios </a> </li>
<li> <a href="/Contacto">Contacto </a> </li>
</ul>
Codigo Jquery
var rutaPagina = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".navbar a").each(
function() {
if ($(this).attr("href") == "/" + rutaPagina)
$(this).addClass("rojo");
})
En este caso la cosa cambio ligeramente, primeramente tenemos una variable, esta variable tomara la ruta de la página que estamos visitando, posteriormente comparara si la ruta es la misma con el enlace que tenemos en el li, y si es correcto le pondrá la clase que hayamos dispuesto para marcar que es el enlace activo.
Espero que lo anterior les ayude a resolver ese pequeño problema con los menús que necesitan ser mostrados como activos, saludos a todos
No hay comentarios:
Publicar un comentario
Para insertar un poco de código o lenguaje, utilice <i rel="code"> ... El Codigo o Lenguaje ... </i>
Para insertar código o lenguaje mas extenso, utilice <i rel="pre"> ... El Codigo o Lenguaje ... </i>
Para insertar una imagen, utilice <i rel="image"> ... Url de la Imagen ... </i>