Programación Web y Scripting > CSS / SASS / LESS
mantener propiedad css con click..
(1/1)
cesand:
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; }
Navegación
Ir a la versión completa