SoloCodigo

Programación Web y Scripting => HTML => CSS / SASS / LESS => Mensaje iniciado por: cesand en Martes 28 de Diciembre de 2010, 06:17

Título: mantener propiedad css con click..
Publicado por: 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.
Título: Re: mantener propiedad css con click..
Publicado por: fonsi3 en Martes 28 de Diciembre de 2010, 17:16
Eso se hace con javascript. Aqui tienes un ejemplo:

La estructura HTML:
Código: Text
  1. <html>
  2.     <head>
  3.         <style>
  4.         </style>
  5.     </head>
  6.     <body>
  7.         <ul id="myList">
  8.             <li>Pocho</li>
  9.             <li>Toto</li>
  10.             <li>Cholo</li>
  11.             <li>Tom</li>
  12.             <li>Moncho</li>
  13.             <li>Rodolfo</li>
  14.             <li>Otto</li>
  15.             <li>Pololo</li>
  16.         </ul>
  17.     </body>
  18. </html>
  19. <script>
  20. </script>
  21.  

El css:
Código: CSS
  1.             #myList li {
  2.                 display: inline;
  3.                 padding: 5px 6px;
  4.                 background-color: #B0C4DE;
  5.                 font: 600 13px Georgia;
  6.                 color: #555;
  7.                 -moz-border-radius-topleft: 5px;
  8.                 -moz-border-radius-topright: 5px;
  9.                 text-shadow: 0px 0px 1px #fff;
  10.                 border-bottom: 1px solid #F5F5F5;
  11.                 cursor: pointer;
  12.             }
  13.             #myList li.selected {
  14.                 border-bottom: 1px solid #FF7F50;
  15.                 padding-top: 7px;
  16.             }
  17.  

y el javascript:

Código: Text
  1.     // obtengo todos los <li> del parent #myList
  2.     var items = document.getElementById( 'myList' ).getElementsByTagName( 'li' );
  3.     // referencia a cual fue el ultimo <li> seleccionado
  4.     var lastItem;
  5.    
  6.     // la function que se encarga de ponerle la class al <li> clickeado
  7.     var doSelect = function() {
  8.         // primero por si le saco si es que tiene la clase "selected" al item previo
  9.         if( lastItem ) {
  10.             lastItem.className = '';
  11.         }
  12.        
  13.         // this es el <li> en el cual se ha hecho click
  14.         this.className = 'selected';
  15.         lastItem = this;
  16.     };
  17.    
  18.     // registro el evento click pa cada <li>
  19.     for( var i = 0, l = items.length; i < l; i++ ) {
  20.         items[i].onclick = doSelect;
  21.     }
  22.