Menu li onclick change color mais différente pour chaque li

bonjour,

j'ai un menu fait en ul => li.

Le background color de mes li est par defaut en black.

j'aimerais quand je clique sur un li changer le bacground color.

ça je sais faire

Code:

---

1 2 3 4 5 6 7

$(document).ready(function() { $("#menu > li").click(function(){ $("#menu > li").removeClass('selected'); $(this).addClass('selected'); }) });

---

sauf que j'aimerai par exemple que mon element 1 soit bleu si je clic dessus, que mon element 2 soit jaune si je clic dessus ...

chaque element de mon menu aura une couleur differente quand on clique dessus.

Bonjour,

Il te faut créer une class style pour chacun de tes li

Et dans ta fonction js modifier le nom de la class en fonction de l'index récupéré.

De mémoire :

Code:

---

$(this).index()

---

il n'y a vraiment pas plus simple humm bien dommage.

Merci

Désolé ^^,

Ça ne te fait pas énormément de modification à faire :

Code:

---

1 2 3 4 5

.selected1 {background-color:red;} .selected2 {background-color:blue;} ... .selectedX {background-color:yellow;}

---

je sais que ce n'est pas grand chose mais bon. Je pensais qu'il y avait peut etre plus, j'avais pensé à ça, mais je pensais qu'une autre solution existé en attendant merci de ta réponse.

Je t'en prie ;)

Pense à fermer la discussion si ton problème est résolue 8-)

Moi je vois une autre solution : utiliser la pseudo-classe :nth-child. C'est une amélioration de :first-child. Le seul problème, c'est que c'est du CSS3 donc ça ne marche que sur les navigateurs récents.

Code:

---

1 2 3

li.selected:nth-child(1) { background-color: #600; } li.selected:nth-child(2) { background-color: #040; } li.selected:nth-child(3) { background-color: #005; }

---

Il faut juste se souvenir que ça commence à 1 et non pas à 0.

Bonsoir,
je ne sais pas si c'est plus simple mais voici une autre solution en javascript et jQuery.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(document).ready( function() { var bckg = 0;   $("#menu > li").on("click", function(){ var num = $( "li" ).index( this ); // On récupère le numéro du li   if (num == 0) bckg = '#ccc'; // En fonction de son else if (num == 1) bckg = '#fb4'; // numéro, on attribue else if (num == 2) bckg = '#111'; // une couleur   $('#menu > li').removeAttr( 'style' ); // On retire tous les styles $(this).css('background',bckg); // On applique la couleur sur le li cliqué }) });

---

je vous remercie toute ces solutions me semble bien bonne journée à tous.