Changer la couleur sur clique d'un onglet dans un menu

**nadiaflamingenierie** · 14/04/2008, 18h31

Bonjour,

J'ai un menu constitué de 5 onglets, je veux quand on clique sur un onglet de ce menu la couleur change par exemple de la couleur blanc au bleu clair pour que l'utilisateur save dans quel onglet il est et que les autres onglets restent dans leurs coleur initiale(blanc).

avez vous une idée sur ça?

**Jumano** · 14/04/2008, 22h16

Bonsoir,
Montre nous un peu de code ...
Tu peux déjà regarder du côté du CSS avec un changement de "class" sur un "onclick" par exemple ...

**nadiaflamingenierie** · 15/04/2008, 10h26

Bonjour,

voilà un exemple de mon code:

Code :

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

1
2
3
4
5
<td align="center" width="67">
  <a style="text-decoration:none; color:#FFFFFF; font-size:14" href="?page=accueil">
<b onmouseup="this.style.color='#ccffff';"onmouseover="this.style.color='#ccffff';" onmouseout="this.style.color='#FFFFFF';">accueil</b>
</a>
</td>

Svp je suis débutante en javascript, pouvez vous m'aider sur mon problème?

Trés cordialement.

**Jumano** · 15/04/2008, 10h52

Tu peux faire un truc dans ce style :
1 - tu définis tes styles :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
.Style1 {
background-color:#0099FF;
text-decoration:none;
color:#FFFFFF;
font-size:14;
font-weight:bold;
}
.Style2 {
background-color:#00CC99;
text-decoration:none;
color:#ccffff;
font-size:14;
font-weight:bold;
}
 
a:link {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
	font-size:14;
}
a:visited {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
	font-size:14;
}
a:hover {
	color: #ccffff;
	text-decoration: none;
	font-weight: bold;
	font-size:14;
}
</style>

2 - tu les appliques :

Code :

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

1
2
<td align="center" width="67" class="Style1" onmouseover="this.className='Style2';" onmouseout="this.className='Style1';" >
<a href="?page=accueil">accueil</a></td>

**nadiaflamingenierie** · 15/04/2008, 14h14

Bonjour,

j'ai testé ton code,j'ai remargué que on clique sur le menu accueil ne change pas de couleur.

**madevilts** · 15/04/2008, 14h55

Normal. Le code de jumano ne change pas la couleur lors du clic

Pour faire ce que tu souhaites, il nous faudrait le code complet

**Jumano** · 15/04/2008, 15h12

Excuse moi, je suis parti sur le onmouseover

modifie comme ceci :

Code :

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

1
2
3
4
5
6
<table>
<tr>
<td align="center" width="67" class="Style1" onclick="this.className='Style2';">
<a href="#">accueil</a></td>
</tr>
</table>

**madevilts** · 15/04/2008, 15h23

Oui mais ça marche pas pour plusieurs onglet

enfin c'est un bon début dont tu peux t'inspirer pour réaliser la globalité

**Jumano** · 15/04/2008, 15h42

Il me semble qu'il faut juste mettre le onclick sur chaque <td> auquel tu veux appliquer l'effet ....

**madevilts** · 15/04/2008, 15h52

Envoyé par jumano

Il me semble qu'il faut juste mettre le onclick sur chaque <td> auquel tu veux appliquer l'effet ....

Je pensais qu'il fallait remettre le Style1 aux autres onglet pour que l'onglet courant soit le seul en Style2

j'ai tellement l'habitude de faire ça que je voudrais que tout le monde fasse comme moi.

**Jumano** · 15/04/2008, 16h03

Oui effectivement, si on veut qu'il n'y ai qu'un onglet en style2, le code n'est pas adpaté,puisque celui ci une fois le clic effectué, l'onglet restera en style2.

Mais comme tu l'as dit précédemment il faudrait savoir ce que nadiaflamingenierie désire vraiment ...

**nadiaflamingenierie** · 15/04/2008, 17h35

Bonjour,

merci à vous tous.

quand je clique sur un onglet de menu il change de couleur juste en cliquant dessus, mais je veux qu' il changera de couleur pour que l'utilisateur save dans quel onglet il se trouve.

merci de votre aide.

**Jumano** · 15/04/2008, 17h37

Il faudrait montrer le code de ton menu en entier ce sera plus facile ...

**nadiaflamingenierie** · 15/04/2008, 17h50

D'accord,

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<table border="0" >
		 <tr>
		  <bn>
 
 
			   <td align="center" width="67" >
					<a  href="?page=accueil" style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif">
						 <BOUCLE_accueil(RUBRIQUES){id_rubrique=1}>
						 	<b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">accueil</b>
						 </BOUCLE_accueil>
					</a>
				</td>
 
 
			   <td align="center" width="102">
				 <a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
				 href="?page=presentation">
				  <BOUCLE_presentation(RUBRIQUES){id_rubrique=2}>
				  <b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">pr&eacute;sentation</b> 
				  </BOUCLE_presentation>
			   </a></td> 
 
 
 
		   		<td align="center" width="142">
					<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
					href="?page=programmes_neufs">
					  <BOUCLE_prog_neuf(RUBRIQUES){id_rubrique=3}> 
					  <b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">programmes neufs</b>
					  </BOUCLE_prog_neuf>
					 </a>
				</td> 
 
 
 
		   		 <td align="center" width="110">
				 		<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
						href="?page=Bienavendre">
							<BOUCLE_bien_a_vendre(RUBRIQUES){id_rubrique=4}>
							<b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">biens &agrave; vendre</b>
							</BOUCLE_bien_a_vendre>
						</a> 
				 </td>
 
 
 
		   		<td align="center" width="157">
						<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
						href="?page=Defiscalisation">
							<BOUCLE_defiscalisation(RUBRIQUES){id_rubrique=5}>
							<b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">d&eacute;fiscalisations et lois</b>
							</BOUCLE_defiscalisation>
						</a>
				</td> 
 
 
		 	<td width="112" align="center">
		 		<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
				href="?page=contact">
					 <BOUCLE_contact(RUBRIQUES){id_rubrique=6}>
					 <b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">contactez nous</b>
					 </BOUCLE_contact>
				</a>
			</td>
 
	</bn>
	<//bn>
 
		 </tr>
	   </table>

déjà je change de couleur pour les onglets au passage de la souris,il me reste le clique sur un onglet, càd quand je clique sur un obglet ce dernier changera de couleur pour que l'utilisateur sait dans dans quel onglet il se trouve.

merci de votre aide.

Trés cordialement.

**Jumano** · 15/04/2008, 18h07

Essaye ce code, et dis moi :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<style>
.Style1 {
background-color:#0099FF;
}
.Style2 {
background-color:#00CC99;
}
</style>
<script language="javascript" type="text/javascript">
function changeCouleur(id1,id2,id3,id4,id5,id6) {
document.getElementById(id1).className = 'Style2';
document.getElementById(id2).className = 'Style1';
document.getElementById(id3).className = 'Style1';
document.getElementById(id4).className = 'Style1';
document.getElementById(id5).className = 'Style1';
document.getElementById(id6).className = 'Style1';
}
</script>
<table border="0" >
		 <tr>
		  <bn>
 
 
			   <td align="center" width="67" id="1" onclick="changeCouleur('1','2','3','4','5','6');">
					<a  href="?page=accueil" style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif">
						 <BOUCLE_accueil(RUBRIQUES){id_rubrique=1}>
						 	<b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">accueil</b>
						 </BOUCLE_accueil>
					</a>
				</td>
 
 
			   <td align="center" width="102" id="2" onclick="changeCouleur('2','1','3','4','5','6');">
				 <a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
				 href="?page=presentation">
				  <BOUCLE_presentation(RUBRIQUES){id_rubrique=2}>
				  <b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">pr&eacute;sentation</b> 
				  </BOUCLE_presentation>
			   </a></td> 
 
 
 
		   		<td align="center" width="142" id="3" onclick="changeCouleur('3','1','2','4','5','6');">
					<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
					href="?page=programmes_neufs">
					  <BOUCLE_prog_neuf(RUBRIQUES){id_rubrique=3}> 
					  <b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">programmes neufs</b>
					  </BOUCLE_prog_neuf>
					 </a>
				</td> 
 
 
 
		   		 <td align="center" width="110" id="4" onclick="changeCouleur('4','1','2','3','5','6');">
				 		<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
						href="?page=Bienavendre">
							<BOUCLE_bien_a_vendre(RUBRIQUES){id_rubrique=4}>
							<b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">biens &agrave; vendre</b>
							</BOUCLE_bien_a_vendre>
						</a> 
				 </td>
 
 
 
		   		<td align="center" width="157" id="5" onclick="changeCouleur('5','1','2','3','4','6');">
						<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
						href="?page=Defiscalisation">
							<BOUCLE_defiscalisation(RUBRIQUES){id_rubrique=5}>
							<b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">d&eacute;fiscalisations et lois</b>
							</BOUCLE_defiscalisation>
						</a>
				</td> 
 
 
		 	<td width="112" align="center" id="6" onclick="changeCouleur('6','1','2','3','4','5');">
		 		<a style="text-decoration:none; color:#FFFFFF; font-size:12; font-family:Arial, Helvetica, sans-serif" 
				href="?page=contact">
					 <BOUCLE_contact(RUBRIQUES){id_rubrique=6}>
					 <b onmouseup="this.style.color='#ccffff';" onmouseover="this.style.color='#ccffff';"
                  onmouseout="this.style.color='#FFFFFF';">contactez nous</b>
					 </BOUCLE_contact>
				</a>
			</td>
 
	</bn>
	<//bn>
 
		 </tr>
	   </table>

**Jumano** · 15/04/2008, 18h20

Bon en l'état actuel çà ne fonctionnera pas non plus, puisque lorsque l'on lic sur un des liens <a> la page se rafraichit ...
Comment affiches tu ensuite les différentes pages ?

**nadiaflamingenierie** · 15/04/2008, 18h26

j'ai testé ton code, j'ai le meme problème quand je clique sur un onglet il change de couleur juste en cliquant dessus alors qu il doit garder cette couleur tant que j ai pas cliquer sur un autre onglet.

**nadiaflamingenierie** · 15/04/2008, 18h29

qu est ce que tu veux dire avec la façon d'affichage des pages?
en fait, pour chaque onglet je lui rattache un lien qui ramène vers une page.

**Jumano** · 15/04/2008, 18h34

Le soucis comme je te l'ai dit c'est que lorsque tu cliques sur accueil par exemple ta page se réaffiche, donc la fonction ne fait plus effet puisque les styles sont remis par défaut.

Ton menu est présent sur chaque page ? ou alors utilises tu des frames, ou des includes pour afficher tes pages.

As tu une page accueil, une page présentation, une page programmes_neufs, etc... avec sur chacune d'elles le menu ?