Discussion :

[mLk92]

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 :

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

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 :

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

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 !

[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 ?....

[mLk92]

Effectivement tu n'a pas tt compris

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é

[jln13]

J'ai du mal me faire comprendre ...

Tu fais ca :

Code :

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

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 ?

[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é ?

[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.

[mLk92]

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 :

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

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 ?

• 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.

[jln13]

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

Concernant l'ajax je pense effectivement que c'est pas la solution dans ton cas sinon il faudra que tu revoies ton architecture...

[mLk92]

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

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 ?

[SpaceFrog]

Code :

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

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

??

[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

[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 ...

[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 )

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