Discussion :

[freye]

Bonjour
je souhaiterais faire un menu avec les <li> contenant des liens et je voudrais que lorsqu'on clique sur un li son background change.
Voici mon HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul>
    <li ><a href="#div1" >truc1</a></li>
    <li ><a href="#div2" >truc2</a></li>
</ul>

Mon css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.active{
background:blue;
}
 
li  {
background:red;
}

Mon jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(" ul li").click(function(){
	$("ul li").removeClass('active'); 
	$(this).addClass('active'); 
});

Cela fonctionne très bien lorsque les liens dirigent vers des ancres comme mon exemple, mais dès que mes liens dirigent vers une autre page par ex

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="page1.html">page1</a>

, ça ne marche plus et je me demande bien pourquoi !!
merci de votre aide

[danielhagnoul]

Bonsoir

L'effet a lieu, mais vous n'avez pas le temps de le voir, il faut cliquer dans l'élément "li" mais pas sur le lien sinon vous chargez une autre page web. Donnez du "padding" aux "li" pour avoir de la place pour cliquer en dehors du lien.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.active {
	background:blue;
}
li {
	padding: 12px;
	background:red;
}

[freye]

D'accord je comprends mon erreur... Merci