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:
Luego dentro del CSS la clase current:
Y el JQuery:
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:
Pero no aparece nada :/ ¿como puedo hacer?
Gracias de ante mano!
Tengo esta lista html:
Código (html4strict) [Seleccionar]
<div id="menu_lateral" class="menu_lateral">
<ul>
<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>
</ul>
</div>
Luego dentro del CSS la clase current:
Código (css) [Seleccionar]
.current{
background-color:blue;
}
Y el JQuery:
Código (javascript) [Seleccionar]
function 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) [Seleccionar]
.current{
background-image:url('icono_menu.png');
}
Pero no aparece nada :/ ¿como puedo hacer?
Gracias de ante mano!