Hola! Estoy desarrollando un pequeño sitio web haciendo uso de tecnologias 2.0 para aprender un poco :) y me topé con este pequeño problema!
Tengo esta lista html:
Código HTML:
Ver original<div id="menu_lateral" class="menu_lateral">
<li class="current"><a href="#">Item 1
</a></li> <li><a href="#">Item 2
</a></li> <li><a href="#">Item 3
</a></li> <li><a href="#">Item 4
</a></li> <li><a href="#">Item 5
</a></li>
Luego dentro del CSS la clase current:
Y el JQuery:
Código Javascript
:
Ver originalfunction main(){
$('li').click(addrem_class);
}
function addrem_class(){
$(this).addClass('current').siblings().removeClass('current');
}
var d = $(document);
d.ready(main);
Bien! esto funciona! cuando selecciono, por ejemplo, el item 3 se pone con fondo azul y automaticamente el item 1 (que viene seleccionado x default) se le va el fondo (queda normal). Si paso a otro item se pondra azul y el item anteriormente seleccionado vuelve a la normalidad, es decir, solo se mantiene con fondo azul el item activo.
El problema surge ahora cuando en vez de ponerle fondo azul a los items activos quiero poner un pequeño icono a su izquierda, precisamente este:
Intente en el CSS:
Código CSS:
Ver original.current{
background-image:url('icono_menu.png');
}
Pero no aparece nada :/ ¿como puedo hacer?
Gracias de ante mano!