Autor Tema: mantener propiedad css con click.. (Leído 3144 veces)

cesand · « **en:** Martes 28 de Diciembre de 2010, 06:17 »

hola gente como les va?
necesito hacer una connsulta antes de enloquecer.. no logro hacer que una propiedad css se mantenga despues de hacer clic sobre ella que no es mas que un link..
estoy haciendo un menu orizontal con una lista desordenada bien hasta ahi, son 3 <li> estos items de la lista tienen unas propiedades que le dibuja un borde y lo que yo quiero hacer es que cuanga haga un click sobre cualqiera se le borre a esa el borde de abajo solamente.. :S
no lo puedo hacer.
si aplico las propiedades a los <li> con un :active me lo hace perfecto al efecto que quiero pero obiamente unos segundo y la propiedad se va.. yo necesito que la propiedad de borrar el borde de abajo permanezca hasta que haga click en otra <li>
se dan una idea como podre hacer esto?
les agrades mucho desde ya espero se entienda.. aclaro dentro de cada na de las tres <li> tengo un simple vinculo..

Saludos a todos.

fonsi3

Eso se hace con javascript. Aqui tienes un ejemplo:

La estructura HTML:

Código: Text

<html>
    <head>
        <style>
        </style>
    </head>
    <body>
        <ul id="myList">
            <li>Pocho</li>
            <li>Toto</li>
            <li>Cholo</li>
            <li>Tom</li>
            <li>Moncho</li>
            <li>Rodolfo</li>
            <li>Otto</li>
            <li>Pololo</li>
        </ul>
    </body>
</html>
<script>
</script>
 

El css:

Código: CSS

            #myList li {
                display: inline;
                padding: 5px 6px;
                background-color: #B0C4DE;
                font: 600 13px Georgia;
                color: #555;
                -moz-border-radius-topleft: 5px;
                -moz-border-radius-topright: 5px;
                text-shadow: 0px 0px 1px #fff;
                border-bottom: 1px solid #F5F5F5;
                cursor: pointer;
            }
            #myList li.selected {
                border-bottom: 1px solid #FF7F50;
                padding-top: 7px;
            }
 

y el javascript:

Código: Text

    // obtengo todos los <li> del parent #myList
    var items = document.getElementById( 'myList' ).getElementsByTagName( 'li' );
    // referencia a cual fue el ultimo <li> seleccionado
    var lastItem;
    
    // la function que se encarga de ponerle la class al <li> clickeado
    var doSelect = function() {
        // primero por si le saco si es que tiene la clase "selected" al item previo
        if( lastItem ) {
            lastItem.className = '';
        }
        
        // this es el <li> en el cual se ha hecho click
        this.className = 'selected';
        lastItem = this;
    };
    
    // registro el evento click pa cada <li>
    for( var i = 0, l = items.length; i < l; i++ ) {
        items[i].onclick = doSelect;
    }
 

SoloCodigo

Autor Tema: mantener propiedad css con click.. (Leído 3144 veces)

cesand

mantener propiedad css con click..

fonsi3

Re: mantener propiedad css con click..