Evènement sur un liens

Version imprimable

Hi all !

Alors voilà j'ai 4 liens d'un menu, et je voudrais que lorsque je clique sur le liens, il me renvoie à sa page correspondante, et qu'une fois sur la page correspondante, qu'il change de fond, et ceux jusqu'au prochain clik dans le menu.

pour l'instant j'ai crée 2 classe, l'une normal, l'une quand il y a sélection. J'ai mis des id sur chaque partie du menu, avec un onClick sur chaque liens.

voici le code HTML :
Code:

1 2 3 4 5 <td id="topMenu2" class="centerNav"><a href="menu1_nveh.jsp" onclick="javascript:switchMenu(2);">Menu 1</a></td> <td id="topMenu3" class="centerNav"><a href="menu3_nveh.jsp" onclick="javascript:switchMenu(3);">Menu 3</a></td> <td id="topMenu4" class="centerNav"><a href="menu4_nveh.jsp" onclick="javascript:switchMenu(4);">Menu 4</a></td> <td id="topMenu5" class="centerNav"><a href="menu5.jsp" onclick="javascript:switchMenu(5);">Menu 5</a></td>
Le code Javascript correspondant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function switchMenu(id) { for (var i = 2; i<=5; i++) { if (document.getElementById('topMenu'+i)){ if(i==id){ document.getElementById('topMenu'+i).className='centerNavSelected'; alert("class = centerNavSelected"); } else{ document.getElementById('topMenu'+i).className='centerNav'; alert("class = centerNav"); } } }
J'ai remarqué qu'en arrivant sur la page demandé, il n'y a rien mais en cliquant sur le bouton précédent, on voit que le menu sélectionné a changé comme je veux :?

Une solution ?

Merci pour vos réponses !

04/12/2007, 15h55
jln13
Salut,

je suis pas sur de bien comprendre ce que tu veux.
Je reformule, dis moi si je me trompe..

Tu veux cliquer sur un de tes liens et etre dirigé vers la page correspondante (menuX_nveh.jsp).
Une fois sur cette page tu veux un style (class centerNav) pour ton menu différent selon la page sur laquelle tu es ?

Tu as donc ton menu dupliqué sur chaque page menuX_nveh.jsp ?

J'en viens au doute que j'ai en voyant ton code :
Tu modifies la class centerNav de la page courante en javascript puis tu redirige vers la page menuX_nveh.jsp ? Auquel cas, c'est normal que ca ne marche pas.. il faut soit :
- que tu appliques un style different directement dans chaque page menuX_nveh,jsp (cas ou tu as dupliqué ton menu dans toutes tes pages)
- soit tu as une seule page (disons menu_nveh.jsp) et tu changes en javascript ton style vu que tu ne recharge pas ta page.
Je me suis bien fait comprendre ?.... 8O
04/12/2007, 16h01
mLk92

Effectivement tu n'a pas tt compris :mrgreen:

Je veux qu'une fois sur la page sélectionné, son liens correspondant ai la classe "centerNavSelected", et le reste en "centerNav".

Mon menu n' est pas dupliqué, j'ai simplement aucune classe de changé.

Et là où le comportement est bizarre, c'est qu'en venant sur la page précédente, le menu sélectionné auparavant a sa classe de changé :?
04/12/2007, 16h25
jln13
J'ai du mal me faire comprendre ...

Tu fais ca :
Code:

1 2 3 4 5 <a href="menu1_nveh.jsp" ... <a href="menu3_nveh.jsp"... <a href="menu4_nveh.jsp"... <a href="menu5.jsp"...
donc quand tu clique sur ton lien tu fais :

1) change la class du lien cliqué en centerNavSelected dans la page courante (javascript)
2) redirige vers une autre page que la page courante

Ca peut donc pas marcher si ca fonctionne comme ca. Il faut que tu appliques le bon style sur ton menu selon la page dans laquelle tu es.
Si tu veux changer le style en javascript alors il ne faut pas que tu recharges ta page.

On est d'accord ?
04/12/2007, 16h35
mLk92

Ok mais comment veux tu que j'aille dans la page cliqué si je rafraichit pas ? ça se fait automatiquement non ? et pourquoi le menu cliqué ne garde pas la classe donné quand il es sélectionné ?
04/12/2007, 16h41
jln13
Alors la t'as plusieurs solutions, dont :
- faire des if dans ton fichier contenant ton menu pour afficher le bon style en fonction de la page dans laquelle tu es. (le plus simple).
- Faire de l'ajax pour ne recharger que le contenu de ta page menu_nveh.jsp" et changer le style en javascript comme tu as fait. Ca implique que tu n'as plus qu'une page jsp au lieu de tes 4 pages par contre.

Citation:

Envoyé par jln13

Alors la t'as plusieurs solutions, dont :

faire des if dans ton fichier contenant ton menu pour afficher le bon style en fonction de la page dans laquelle tu es. (le plus simple).

Un truc de ce style ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if(i == 2){ afficher( <td id="topMenu2" class="centerNav"><a href="menu1_nveh.jsp" onclick="javascript:switchMenu(2);">Menu 1</a></td> <td id="topMenu3" class="centerNavSelected"><a href="menu3_nveh.jsp" onclick="javascript:switchMenu(3);">Menu 3</a></td> <td id="topMenu4" class="centerNav"><a href="menu4_nveh.jsp" onclick="javascript:switchMenu(4);">Menu 4</a></td> <td id="topMenu5" class="centerNav"><a href="menu5.jsp" onclick="javascript:switchMenu(5);">Menu 5</a></td>) }elsif(i== 3){ afficher( <td id="topMenu2" class="centerNav"><a href="menu1_nveh.jsp" onclick="javascript:switchMenu(2);">Menu 1</a></td> <td id="topMenu3" class="centerNav"><a href="menu3_nveh.jsp" onclick="javascript:switchMenu(3);">Menu 3</a></td> <td id="topMenu4" class="centerNavSelected"><a href="menu4_nveh.jsp" onclick="javascript:switchMenu(4);">Menu 4</a></td> <td id="topMenu5" class="centerNav"><a href="menu5.jsp" onclick="javascript:switchMenu(5);">Menu 5</a></td>) } }
Pourquoi pas, mais comment on fait pour afficher tout un bout de code comme celui ci ?

Citation:

Envoyé par jln13

Faire de l'ajax pour ne recharger que le contenu de ta page menu_nveh.jsp" et changer le style en javascript comme tu as fait. Ca implique que tu n'as plus qu'une page jsp au lieu de tes 4 pages par contre.

ce menu est déjà dans un template, après, ce sont les pages qui viennent ce greffer à un certains endroit du template.
C'est comme si j'avais un fichier header que j'appelais via include en php.

04/12/2007, 17h17
jln13

Citation:

Un truc de ce style ?
Pourquoi pas, mais comment on fait pour afficher tout un bout de code comme celui ci ?

Oui un truc de ce style.
Pour traduire cet algo tu utilise une techno genre jstl vu que je vois que tu fais des jsp. Je sais pas trop c'est toi qui sait quelles technos tu utilises en fait :D

Concernant l'ajax je pense effectivement que c'est pas la solution dans ton cas sinon il faudra que tu revoies ton architecture...
04/12/2007, 17h32
mLk92

Citation:

Envoyé par jln13

Oui un truc de ce style.
Pour traduire cet algo tu utilise une techno genre jstl vu que je vois que tu fais des jsp. Je sais pas trop c'est toi qui sait quelles technos tu utilises en fait :D

Ce sont des Jsp, mais le code pour l'instant n'est que basic, html + css + js, le truc est que je suis un peu novice en javascript, quel serait la méthode pour greffer du code ?
04/12/2007, 17h43
SpaceFrog

Code:

<a href="#" onclick="switchMenu(2);self.location.href='menu1_nveh.jsp';return false">Menu 1</a>

??
04/12/2007, 17h53
mLk92

Marche po :(

Il me fait bien le lien, mais lorsque je suis sur la page le bloc du menu ne change pas de class :?
04/12/2007, 18h00
SpaceFrog

si tu fais un target _blank tu conservera le style modifié dynamiquement sur la page ...

il faudrait passer le menu selectionné dasn l'url ...
dès que tu quittes la page tu perds toutes les modifs, d'ou la necessité du script sur le onload de ta page pour aller chercher les paramètres dasn le lien ...
voir faq passage de paramètres ...
05/12/2007, 11h56
mLk92

C'est un template ^^, je n'utilise pas de passage de paramètres (d'ailleurs je ne sais même pas si c'est possible en jsp :roll:)

Le target blank n'y change rien, je pense que je vais faire la méthode barbare du if(i=id) alors affiche tel menu, seulement comment est-ce possible ? sachant que je ne dois pas toucher au code dans la page jsp, je ne peux donc que le faire en javascript.

est-ce possible via un div id , ou si on récupère l'id du div et s'il est égale à tel id on affiche tel code ?

Je m'en vais repartir fouiller Google :aie: