selection <li> click

Bonjour,
j'ai un problème, jai une liste de type <ul> contenant des <li>..*
exemple:
Code:

1 2 3 4 5 6 <ul id="test"> <li><a href="#"> bla </a></li> <li><a href="#"> bla2 </a></li> <li><a href="#"> bla3 </a></li> <li><a href="#"> bla4 </a></li>
je souhaiterais que lorsque je clique sur une des li, celle ci change de style et ainsi indique que c'est cette section qui est courante.

Mon code:
Code:

1 2 3 4 5 6 $("#test li").click(function () { $(selected).css('background','white'); selected=this; $(selected).css('background','blue'); });
avec la variable selected qui sert a stocker le li courant avant le nouveau clic.
Or ce code ne fonctionne pas, je n'arrive pas à bien désigner le <li> que je souhaite.

Code:

1
2
3
4
$('#test li').click(function(){
		$('#test li').css({'background-color':'white'});
	   $(this).css({'background-color':'blue'});
})

Code:

1
2
3
4
$("#test").click(function (e) {
selected = e.target;
$(selected).css('background-color','blue').siblings().css('background-color','white');
});

Code:

1
2
3
4
5
6
7
$(function(){
$('#test li').click(function(e){
		e.preventDefault();
		$('#test li').each(function(){ $(this).css({'background-color':(e.target.parentNode == this)?'blue':'white'});
		})
})
})

:P

Citation:
Envoyé par SpaceFrog
Code:

1 2 3 4 5 6 7 $(function(){ $('#test li').click(function(e){ e.preventDefault(); $('#test li').each(function(){ $(this).css({'background-color':(e.target.parentNode == this)?'blue':'white'}); }) }) })
:P
Arf... bien vu !
M'enfin, je comprendrais jamais cette obstination farouche (pour ne pas dire malsaine) de mettre des liens là où on ne veut pas que ça soit des liens :roll:

oui en effet les balise a sont totalement inutiles, voire nocives dans ce cas ...

Code:

1
2
3
4
5
6
7
$(function(){
$(function(){
$('#test li').click(function(e){
		$('#test li').each(function(){ $(this).css({'background-color':(e.target == this)?'blue':'white'});
		})
}).css({'cursor':'pointer'})
})})