Changer la class d'un menu

Bien le bonjour,

Bon, j'ai du faire 15 forums, avant de venir vous voir et d'être sur que je trouverais la solution ici, héhé. ^^

Voilà, ça ne doit pas être la mer à boire mais je n'arrive pas à changer la class d'un menu.

Voici le HTML :

Code:

---

1 2 3 4 5 6 7

<ul id="nav_ad"> <li class="cur"><a href="accueil.php" class="lien_Menu"><strong>Accueil</strong></a></li> <li><a href="dada.php" class="lien_Menu">Lien A</a></li> <li><a href="dodo.php" class="lien_Menu">Lien B</a></li> <li><a href="dudu.php" class="lien_Menu">Lien C</a></li> <li><a href="dede.php" class="lien_Menu">Lien D</a></li> </ul>

---

Donc le menu est quasiment sous la même forme que celui de développer.com, et lorsque l'on clique sur un des onglets sur menu, le css change selon l'onglet que l'on à cliquer.

Voilà mon javascript :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function rollover() { if(!document.getElementById || !document.createTextNode){return;} var n=document.getElementById('nav_ad'); if(!n){return;} var lis=n.getElementsByTagName('li'); for (var i=0;i<lis.length;i++) { lis[i].onmouseover=function() { this.className=this.className?'cur':'over'; } lis[i].onmouseout=function() { this.className=this.className=='cur'?'cur':''; } } } window.onload=rollover;

---

La class ne bouge pas, elle veut rester sur Accueil. Pas moyen de la faire bouger !!! erf erf erf

Merci pour votre aide. ;)

Là tu utilises onmouseover, c'est à dire le passage de la souris par dessus un élément sans cliquer. Ce qui peut être fait simplement en CSS

Code:

---

1 2 3 4 5 6 7 8

#nav_ad li { background:red; }   #nav_ad li:hover { background:green; }

---

Si tu veux changer la classe du menu après un clic, et donc après un changement de page, je suppose que le plus simple serait de mettre un HTML différent pour le menu dans chaque page.

Merci pour la réponse, mais oui il y a changement de page donc il faut que les "li" du menu se mettent à jour.

Et donc il faudrait mettre un style différent pour chaque page, pourquoi pas !

Donc on récupére l'URL, et suite à l'identification de l'URL on marque la "li" avec un style particulier ?

EDIT:

Voici mon CSS de départ :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

#nav_ad li.cur, #nav_ad li.over, #nav_ad li:hover { background:url("../images/menu vertical/tabblue.gif") #3375b2 top left no-repeat; border-bottom:1px solid #036; }   #nav_ad li strong, ul#nav_ad li.cur a, ul#nav_ad li.over a, ul#nav_ad li:hover a { display:block; color:#fff; padding-left: 0px; padding-right: 2px; padding-top: 0px; text-decoration:none; background:url("../images/menu vertical/tabblue.gif") transparent top right no-repeat; }

---

Donc il y a bien du CSS, mais je veux que lorsque l'on clique sur un onglet, la class "cur" se mette automatiquement sur l'onglet cliquer

Du JAVASCRIPT s'il vous plait :mrgreen:

Pourquoi vouloir à tout prix du Javascript quand ce n'est pas approprié ?

Sur dada.php, tu mets

Code:

---

1 2 3 4 5 6 7

<ul id="nav_ad"> <li><a href="accueil.php" class="lien_Menu"><strong>Accueil</strong></a></li> <li><a href="dada.php" class="lien_Menu cur">Lien A</a></li> <li><a href="dodo.php" class="lien_Menu">Lien B</a></li> <li><a href="dudu.php" class="lien_Menu">Lien C</a></li> <li><a href="dede.php" class="lien_Menu">Lien D</a></li> </ul>

---

et sur dodo.php, tu mets

Code:

---

1 2 3 4 5 6 7

<ul id="nav_ad"> <li><a href="accueil.php" class="lien_Menu"><strong>Accueil</strong></a></li> <li><a href="dada.php" class="lien_Menu">Lien A</a></li> <li><a href="dodo.php" class="lien_Menu cur">Lien B</a></li> <li><a href="dudu.php" class="lien_Menu">Lien C</a></li> <li><a href="dede.php" class="lien_Menu">Lien D</a></li> </ul>

---

Le menu est hors page ^^

Il est juste appelé donc pas possible ton truc :?

Code:

---

include('menu.php');

---

T'as raison... éditer le fichier menu.php pour mettre en place la solution la plus correcte, c'est pas possible.

Bovino aide moi :langue2:

Peu importe le fait que tu utilises un include, c'est quelque-chose de très basique à faire en PHP. Un minimum d'effort de recherche SVP :roll:
http://www.laissemoichercherca.com/?...elected%20item

On est section JAVASCRIPT, dés que sa passe en PHP tu seras prévenu t'inquiet !!

Se serait de cette ordre la

Code:

---

1 2 3 4 5 6 7 8 9 10

// When we click on the LI $("li").click(function(){ // If this isn't already active if (!$(this).hasClass("active")) { // Remove the class from anything that is active $("li.active").removeClass("active"); // And make this active $(this).addClass("active"); } });

---

Oui mais précisément, ce qu'on essaye de te dire, c'est que ce genre de chose doit être fait en PHP et non en JavaScript...

Il ne sert à rien de faire en JavaScript des tâches qui peuvent être faites en PHP. Globalement, l'événement onload (ou dérivés) de l'objet window ne devrait être utilisé que pour initialiser les comportements sur la page, pas pour la modifier.

Si l'on prend ton exemple, c'est très bien, quand on clique sur un lien tu changes la classe de ton <li>. C'est parfait, il est donc mis en valeur. Seulement, tout de suite après, ta page va suivre le lien cliqué et ta sélection aura disparu dans la nouvelle page affichée ! :aie:
Bien sûr, tu peux aussi mettre en place un script qui détecte au chargement du DOM sur quelle page on est et qui ajuste le <li> correspondant, mais encore une fois, c'est demander à JavaScript de faire du travail qui devrait être dévolu au serveur !

Ah d'accord c'est entendu, j'avais pas pris au sérieux l'autre personne qui à répondu...

Du coup je passe une variable de la page principale, jusqu'au menu, pour savoir sur qu'elle page on est et ensuite mettre l'onglet approprié avec la bonne class ? Un truc comme ça ?

Ben oui pourquoi me prendre au sérieux :roll:

Pas besoin, le nom de la page en cours, tu l'as par exemple dans $_SERVER["PHP_SELF"]. Ensuite, dans ton menu, tu peux faire la comparaison avec le lien que tu construis et s'il le faut tu ajoutes la classe.

Merci bien j’essayerais ça demain :ccool:

Résolu merci pour votre aide !