Activar solo un elemento de un menu

[spocnic]

Mi problema es el siguiente:

Tengo una pagina sencilla que tiene un menu que muestra varias secciones de la pagina, la pagina es de solo una pagina, es decir que todo el código para las diferentes secciones esta solamente en el index, todo funciona perfectamente, lo unico que me falta es que al hacer clic en un elemento del menu este se quede activado y los demas se desactiven:

ejemplo:
La fuente de menu esta en color negro, al hacer clic en contacto por ejemplo, contacto se debe volver de color blanco, al hacer clic en home, home se debe volver blanco y contacto debe volver a su estado inicial, es decir de color negro.

Alguien me prodria ayudar, estoy muy atorado en esta parte y no logro solucionarlo, muchas gracias.

Ejemplo del código:

Código HTML:

<nav>
                    <ul class="container">
                        <li class="menu">
                            <ul>
                                <li class="button"><a href="#">Menu<br>uno<p class="mas" id="masQuienes">+</p></a></li>
                                <li class="dropdown">
                                    <ul id="nav">
                                        <li class="boton current"><a href="#seccion1">submenu1</a></li>
                                        <li class="boton"><a href="#seccion2">submenu2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
 
                        <li>
                            <ul>
                                <li><a href="#seccion3">menu2<p class="mas">+</p></a></li>
                                <li class="dropdown">
                                    <ul id="servicosDropdown">
                                        <li class="boton"><a href="#seccion4">submenu3</a></li>
                                        <li class="boton"><a href="#seccion5">submenu4</a></li>
                                        <li class="boton"><a href="#seccion6">submenu5</a></li>
                                        <li class="boton"><a href="#seccion7">submenu6</a></li>
                                        <li class="boton"><a href="#seccion8">submenu7</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
 
                        <li class="menu" id="contactoLi">
                            <ul>
                                <li class="button"><a href="#seccion9">Menu3<p class="mas">+</p></a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
 

Código CSS:

ul.container{
    float: left;
    width:255px;
}
ul li{
    margin-right: 10px;
    padding-top: 5px;
    line-height: 19px;
    list-style:none;
    text-align:right;
    color: white;
    letter-spacing: 4px;
    font-weight: lighter;
}
li.button a{
    display:block;
    padding-right: 64px;
    font-size:30px;
    height:40px;
    overflow:hidden;
    position:relative;
    color:white;
    padding-top: 5px
}
li.button a{
    margin-top: 10px;
    text-decoration:none;
}
.dropdown{
    margin-left: -212px;
    color:#9E1A96;
    display:none;
    width:350px;
}
.dropdown li a{
    font-size: 20px;
    text-decoration: none;
    color:#9E1A96;
    letter-spacing: -1px;
}
.dropdown li a:hover{
    color:white;
}
.mas {
    background-color: #9E1A96;
    width: 20px;
    float: right;
    margin-right: -38px;
    margin-top: -30px;
    display: block;
    padding: 8px 5px 8px 8px;
}
#contactoMas {
    background-color: #9E1A96;
    width: 25px;
    float: right;
    margin-right: -35px;
    margin-top: -8px;
    display: block;
    padding-right: 9px;
    padding-bottom: 3px;
    padding:7px 7px 7px 0px;
}
#masQuienes {
    margin-top: -29px;
}
#contactoLi {
    padding-top: 0px;
    height: 50px;
    margin-top: -10px;
}
ul li a p {
    color: #361249;
}
ul li:hover a p{
    background-color: white;
}
li ul li:hover p {
    background-color: white;    
}
 

El jquery que utilice para animar este menu es el [URL="https://code.google.com/p/k-blogger/downloads/detail?name=JQuery.easing.1.3.js&can=2&q="]easing.1.3.js[/URL]
y su script es el siguiente:

Código Javascript:

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */
 
    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    $.easing.def = "easeOutBounce";
 
    /* Binding a click event handler to the links: */
    $('li.button a').click(function(e){
    
        /* Finding the drop down list that corresponds to the current section: */
        var dropDown = $(this).parent().next();
        
        /* Closing all other drop down sections, except the current one */
        $('.dropdown').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        
        /* Preventing the default event (which would be to navigate the browser to the link's address) */
        e.preventDefault();
    })
    
});
 

Y como les decia todo esto me funciona correctamente solo tengo que hacer que un elemento se quede seleccionado al hacer clic, y al seleccionar otro este quede activado y se desactive el anterior ya que que una sistema de una sola pagina.

[newboy_master]

Se supone que el sistema hace lo que necesitas, se activa un menú y se desactiva otro, lo que necesitas es añadir unos estilos al que está activo y quitarlos al resto. Reemplaza estas líneas:

Código Javascript:

$('.dropdown').not(dropDown).slideUp('slow').removeClass('seleccionado');
 dropDown.slideToggle('slow').addClass('seleccionado');
 

Con eso y declarando esa clase (seleccionado) de CSS debería funcionar lo que quieres.

Salu2.

[spocnic]

Iniciado por newboy_master

Se supone que el sistema hace lo que necesitas, se activa un menú y se desactiva otro, lo que necesitas es añadir unos estilos al que está activo y quitarlos al resto. Reemplaza estas líneas:

Código Javascript:

$('.dropdown').not(dropDown).slideUp('slow').removeClass('seleccionado');
 dropDown.slideToggle('slow').addClass('seleccionado');
 

Con eso y declarando esa clase (seleccionado) de CSS debería funcionar lo que quieres.

Salu2.

Lo intente tal cual me comentas pero sigo sin poder obtener el efecto deseado...

[newboy_master]

Último intento, prueba esto: http://jsfiddle.net/8bmg7/

En el ejemplo la última línea de CSS pone amarillas las letras, si es lo que quieres solo tienes que cambiar el color.

Salu2.

[juangemelo01]

Aqui hay otro ejemplo, espero que te sirva amigo
http://codepen.io/anon/pen/bIGJL


con los colores no me llevo mucho, pero se que le puedes dar un mejor estilo

[spocnic]

oh... ya... creo que no se entendió lo que quiero hacer... lo que pretendo es... que cuando de click en un elemento del submenu se que de un color por ejemplo rojo... hasta que de clic en otro elemento del submenu... entonces este nuevo elemento al que le doy clic se vuelva rojo y el anterior vuelva a su color original..., no se si me explico de forma adecuada...

[juangemelo01]

por lo rapido que escribi, se me paso que tu menu era vertical, ademas cometi unos errores, ¿algo asi es lo que quieres?

http://codepen.io/elestudiantefantasma/pen/tLfFc

La porpiedad que hace lo que quieres es FOCUS, lo puedes poner en la hoja de estilo, Mira mel ejemplo y el comentario que puse

[spocnic]

No se puede con la propiedad focus... ya lo intente de mil formas y no se puede... alguien que pueda darme alguna otra idea...

[juangemelo01]

ok revisa este ejemplo, le cambie la propiedad de focus y le aplique la funcion directamente al ul li seleccionado con jquery

http://codepen.io/elestudiantefantasma/pen/tLfFc

espero tu respuesta