changer couleur d un autre div lors d un click

**romocop** · 07/10/2010, 12h42

Bonjour

J'apprends doucement javascript mais là je suis coincé je voudrais modifier la couleur de fond d'un div lors du click et en afficher un autre.
L affichage s effectue sans pb mais impossible de modifier la couleur du div clické.

j autilise le code suivant :

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
<script type="text/javascript"> 
function voirOnglet(id){ 
	for(var i=1;i<=5;i++)
	{
		document.getElementById('onglet_'+i).style.display='none';
	}
 
	if(document.getElementById(id).style.display =='none')
	{
		document.getElementById(id).style.display = 'block';
/*ici je voudrais appeller la fonction pour changer la couleur du div clické*/
couleur_onglet_1 = #111111;
couleur_onglet_2 = #222222;
couleur_onglet_3 = #333333;
couleur_onglet_4 = #444444;
couleur_onglet_5 = #555555;
document.getElementById('menu_'+id).style.background-color:couleur_+id;
 
	} 
}
</script>

j appelle la fonction comme cela

Code :

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

1
2
<div id="menu_onglet_1"><a href="#" onclick="voirOnglet('onglet_1');">lien onglet 1</a></div>
<div id="menu_onglet_2"><a href="#" onclick="voirOnglet('onglet_2');"> lien onglet 1 </a></div>

mais bien evidement cela ne fonctionne pas...

Pourriez vous m indiquer ou cela peche
merci pour votre aide

**gwyohm** · 07/10/2010, 12h55

Bonjour,

essaye comme ca :

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
<script type="text/javascript"> 
function voirOnglet(id){ 
	for(var i=1;i<=5;i++)
	{
		document.getElementById('onglet_'+i).style.display='none';
	}
 
	if(document.getElementById(id).style.display =='none')
	{
		document.getElementById(id).style.display = 'block';
/*ici je voudrais appeller la fonction pour changer la couleur du div clické*/
var colors: {
couleur_onglet_1 : "#111111",
couleur_onglet_2 : "#222222",
couleur_onglet_3 : "#333333",
couleur_onglet_4 : "#444444",
couleur_onglet_5 : "#555555"
};
document.getElementById('menu_'+id).style.backgroundColor = colors["couleur_" + id];
 
	} 
}
</script>

**romocop** · 07/10/2010, 13h37

merci pour ta réponse mais cela ne fonctionne pas et l affichage des div onglet_1 ne s effectue plus...

**Bovino** · 07/10/2010, 13h46

Si l'on en croit ton code

Code :

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

document.getElementById('onglet_'+i).style.display='none';

tu n'as pas d'id 'onglet_n' mais des id 'menu_onglet_n', de même pour

Code :

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

document.getElementById(id).style.display = 'block';

et pour

Code :

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

document.getElementById('menu_'+id)

enfin, comme le fait remarquer gwyohm

Code :

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

document.getElementById('menu_'+id).style.background-color

la propriété de style en JavaScript est "camélisée" :

Code :

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

document.getElementById('menu_'+id).style.backgroundColor

**romocop** · 07/10/2010, 13h54

je debute et essaie d adapter un script tout simple qui fonctionne parfaitement mais peut etre suis-je dans le faux.
peut etre ne devrais-je utiliser que du CSS ?

mon code fonctionnel est le suivant

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lien onglet 1</title>
<style type="text/css"> 
#menu_onglet_1{
	position:relative;
	left:200px;
	height:30px;
	width:130px;
	padding-left:20px;
}
#menu_onglet_2{
	position:relative;
	left:350px;
	top:-30px;
	height:30px;
	}
 
#onglet_1{
	display: block;
	position:relative;
	height:100px;
	background-color:aqua;
	left:170px;
	width:600px;
	top:-30px;
	}
#onglet_2, #onglet_3, #onglet_4, #onglet_5{
display: none;
}
 
</style>
<script type="text/javascript"> 
function voirOnglet(id){ 
	for(var i=1;i<=2;i++)
	{
		document.getElementById('onglet_'+i).style.display='none';
	}
 
	if(document.getElementById(id).style.display =='none')
	{
		document.getElementById(id).style.display = 'block';
 
	} 
}
</script> 
 
</head>
 
<body>
<div id="menu_onglet_1"><a href="#" onclick="voirOnglet('onglet_1');">lien onglet 1</a></div>
	<div id="menu_onglet_2"><a href="#" onclick="voirOnglet('onglet_2');"> lien onglet 1 </a></div>
 
 
<div id="onglet_1"> 
Onglet 1<br /> 
blabla
</div> 
 
<div id="onglet_2"> 
Onglet 2<br /> 
lorem ipsum
</div> 
 
 
</body>
 
</html>

**romocop** · 07/10/2010, 14h35

j ai trouvé un debut de piste ici, je vais creuser mais si je peux malgrés tout avoir vos conseils...

http://blog.studiovitamine.com/actua...fr.html?id=243

changer couleur d un autre div lors d un click

JavaScript

Discussions similaires

Partager

Partager