Comunidad de diseño web y desarrollo en internet online

Dejar opción seleccionada del menu (nav)

Citar            
MensajeEscrito el 10 Jul 2014 09:28 pm
Hola,

Necesito dejar seleccionada la opción del menú que corresponde a la vista actual.

Tengo el siguiente menú:

Código HTML :

nav>
    <ul>
        <li><a href="inicio.html">Inicio</a></li>
        <li>
            <a href="#">Usuarios</a>
            <ul>
                <li><a href="modificar.html">Modificar</a></li>
                <li><a href="agregar.html">Agregar</a></li>
            </ul>
        </li>
        <li><a href="reportes.html">Reportes</a></li>
        <li><a href="sAcceso.html">Solicitud de Acceso</a></li>
    </ul>
</nav>


con Jquery hice una pequeña y básica función, pero no me funciona correctamente.

Código Javascript :

function activeMenu()
{
        $('nav ul li').on('click', function(e){
            $(this).addClass('active');
        });
}


La verdad es que funciona, pero tengo que hacer clic 2 veces sobre el <li> para que se agrega el estilo que me muestra que esta activa.

Cual seria la forma correcta de poder hacerlo ? sin tener que hacer clic 2 veces y cuando haga clic se salga el estilo del <li> seleccionado anteriormente ?

Por jozeepp

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jul 2014 03:28 pm
falto colocar tu eveno lanzador.. en fin aquí un ejemplo de como lo puedes hacer:

http://jsfiddle.net/elporfirio/ebLh4/

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 12 Jul 2014 05:55 pm

elporfirio escribió:

falto colocar tu eveno lanzador.. en fin aquí un ejemplo de como lo puedes hacer:

http://jsfiddle.net/elporfirio/ebLh4/


Hola...
recién eh tenido tiempo de revisar los comentarios.
muchas gracias por el ejemplo realizado, lo probare y te aviso!
Gracias nuevamente =D

Por jozeepp

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Jul 2014 10:36 pm
Hice las pruebas con el ejemplo que enviaste, y efectivamente funciona, deja marcado el link al cual se le hace click.
pero tengo dos detalles.

1.- si le quito el e.preventDefault(); para que si se valla a link correspondiente, debo darle click 2 veces para que quede seleccionado.

2.- le tengo diseño a las etiquetas nav, ul y li... Al ocupar tu ejemplo solo queda seleccionada la etiqueta "a" y no el "li"

como se podría reparar esto ??

Por jozeepp

17 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.