Menu en css activo

Damian_Morales_2030 · #1 (**permalink**) 14/07/2012, 07:49

Estoy haciendo un sitio web en el cual tengo un menu vertical a la izquierda hecho en css. Cada enlace del menu abre diferentes frames. Ahora el problema que tengo es que quiero que cuando haga clic en algun enlace para abrir el frame el enlace quede activado. Ya intente hacer eso desde css con a:active pero cuando hago clic afuera se desactiva.

Espero respuestas. Gracias

memoadian · #2 (**permalink**) 14/07/2012, 16:45

usa javascript. o jquery

Código Javascript:

Ver original$('#boton1').addClass('active');

Código CSS:

Ver original.active{background:red;}

Damian_Morales_2030 · #3 (**permalink**) 14/07/2012, 21:46

Buenas, antes de nada muchisimas gracias por tomarte el tiempo en ofrecerme una posible solucion. Lamentablemente no me funciono lo que me dijiste, porque en realidad fui yo el que explico mal lo que necesito.

Lo que en realidad necesito es que cuando haga clic en un link del menu este quede "activo" y si hago clic en otro lado este no se desactive. Pero si hago clic en otro link del menu el link que estaba activo se desactive y al mismo tiempo se active el que cliquee recientemente. No se si me explique bien :)

Aqui el codigo CSS del menu:

#menu-lateral {
}

#menu-lateral ul {
}

#menu-lateral a {
margin: auto;
padding: 5px 0px 0px 10px;
display: block;
width: 180px;
height: 25px;
color: #999999;
text-align: left;
border-top: solid 1px #323232;
border-bottom: solid 1px #1B1B1B;
background: #282828;
}

#menu-lateral li {
display: block;
}

#menu-lateral a:hover {
color: #FFFFFF;
background-color: #1C1C1C;
background-position: right;
background-repeat: no-repeat;
background-image: url(images/menulateral.gif);
}

Y aqui el HTML:

<div id="menu-lateral">
<ul>
<li><a href="#">Niños</a></li>
<li><a href="#">Jovenes</a></li>
<li><a href="#">Adultos</a></li>
<li><a href="#">PET</a></li>
<li><a href="#">First Certificate</a></li>
<li><a href="#">CAE</a></li>
<li><a href="#">Proficiency</a></li>
<li><a href="#">Empresas</a></li>
</ul>
</div>

Espero tu respuesta pronto. Desde ya, muchas gracias.

memoadian · #4 (**permalink**) 14/07/2012, 22:21

bueno yo tengo algo así como lo que dices en http://comprar-web.com/bella ahí use eso del boton.

claro que ahi me faltó el evento click en si seria algo así:

Código Javascript:

Ver original$('#tags').click(function(){//asignamos el evento click al id del elemento
        $('.top li').removeClass('top-button-current');auitamos la clase current a todos los li en mi caso
        $(this).addClass('top-button-current');//añadimo la clase al evento clickado
    });

rápido y facil

Damian_Morales_2030 · #5 (**permalink**) 14/07/2012, 22:49

Muchisimas gracias por responder tan rapido. Te voy a molestar con algo que a lo mejor te resulta imprudente de mi parte. ¿Podrias poner como iria el codigo Javascript en el HTML?, es que soy casi nulo en el tema de Javascript. Muchisimas gracias.

memoadian · #6 (**permalink**) 15/07/2012, 01:00

Código HTML:

Ver original<!DOCTYPE html>
<head>
    <title>Ejemplo funcional</title>
    <style type="text/css">
        ul{
            list-style-type: none;
        }
        .top div{
            display:none;
            border:1px solid #666;
            background-color: #DDD;
            margin:20px;
            padding:20px;
        }
        .top-button-current{
            padding:5px;
            background:#fe0000;
            color:#fff;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#tags').click(function(){
            $('li').removeClass('top-button-current');
            $(this).addClass('top-button-current');
            $('.top > div').css('display', 'none');
            $('.tags').css('display', 'block');
        });
        
        $('#popular').click(function(){
            $('li').removeClass('top-button-current');
            $(this).addClass('top-button-current');
            $('.top > div').css('display', 'none');
            $('.posts-populares').css('display', 'block');
        });
        
        $('#blog-archives').click(function(){
            $('li').removeClass('top-button-current');
            $(this).addClass('top-button-current');
            $('.top > div').css('display', 'none');
            $('.blog-archives').css('display', 'block');
        });
    });
    </script>
</head>
<body>
    <ul>
        <li class="top-button-current" id="blog-archives">texto</li>
        <li id="tags">texto</li>
        <li id="popular">texto</li>
        <div class="top">
            <div class="tags">tags</div>
            <div class="blog-archives">Blog archives</div>
            <div class="posts-populares">Posts populares</div>
        </div>
    </ul>
</body>

ejemplo completo

Damian_Morales_2030 · #7 (**permalink**) 15/07/2012, 20:54

Muchisimas gracias!!! Mil disculpas por la demora en agradecerte. Lo repito, MUCHISIMAS GRACIAS!!! Que pases bien :)