afficher masquer serie de divs

Version imprimable

Ce topic est un peu vieux mais je dois faire un peu la même chose mais je n'y arrive pas, un peu novice en javascript, je ne comprends pas comment faire l'appel des boutons.
J'ai 3 div j'ai donc fait comme cela:
JS

Code:

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
	 function DivStatus(le_bouton)
{
   var div1 = document.getElementById("conv1");
   var div2 = document.getElementById("conv2");
   var div3 = document.getElementById("conv3");
 
   if(le_bouton == "bouton1")
   {
        if(div1.className == "cachediv")
              div1.className == "showdiv";
        else
              div1.className == "cachediv";
 
        if(div2.className == "showdiv")
              div1.className == "cachediv";
			  div3.className == "cachediv";
   }
   else if(le_bouton == "bouton2")
   {
        if(div2.className == "cachediv")
              div2.className == "showdiv";
        else
              div2.className == "cachediv";
 
        if(div1.className == "showdiv")
              div2.className == "cachediv";
			  div3.className == "cachediv";
   }
   else if(le_bouton == "bouton3")
   {
   		if(div3.className == "cachediv")
			  div3.className == "showdiv";
		else
			  div3.className == "cachediv";
 
		if(div2.className == "showdiv")
              div3.className == "cachediv";
			  div1.className == "cachediv";
 
   }
}

mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div name="conv1" id="conv1" class="showdiv">
         <a href="javascript:DivStatus('bouton3')"><img id="mon_image2" src="images/convic/image2" alt="" name="mon_image2" width="170" height="170" border="0" /></a>
 
<a href="javascript:DivStatus('bouton1')"><img id="mon_image3" src="images/convic/image3" alt="" name="mon_image3" width="170" height="170" border="0" /></a>
</div>
 
<div name="conv2" id="conv2" class="showdiv">
         <a href="javascript:DivStatus('bouton2')"><img id="mon_image3" src="images/convic/image3" alt="" name="mon_image3" width="170" height="170" border="0" /></a>
 
<a href="javascript:DivStatus('bouton1')"><img id="mon_image3" src="images/convic/image3" alt="" name="mon_image3" width="170" height="170" border="0" /></a>
</div>

la troisieme div est identique.

Pouvez-vous me dire comment faire?

Merci de votre aide.

Wyllos

18/11/2010, 08h38
SpaceFrog

8O
la même chose que quoi ?????
18/11/2010, 09h25
RomainVALERI

Citation:

Envoyé par wyllos

Pouvez-vous me dire comment faire?

8O
Comment faire quoi ?????

Aaaah ! la recette de la pâte à crêpe ? :mrgreen:
Eh ben tu prends

200g de farine
50g de sucre
50g de beurre
1/2 litre de lait

Tu réunis la farine en fontaine dans un... *non ? c'est pas ce que tu voulais ?* :roll:
18/11/2010, 10h22
wyllos

Quand j'arrive sur ma page j'ai ma div conv1 qui doit être visible, mes div conv2 et conv3 ne doivent pas l'être. Dans chacune de ces div j'ai 2 images qui me servent de bouton pour afficher une ou l'autre des div masquer.
Je ne sais pas trop comment faire.
J'ai essayé en mettant le code ci-dessus mais j'ai aucune modification des div.

J'espère être un peu plus explicite.

Wyllos
18/11/2010, 10h43
Bovino
Code:

1 2 if(div1.className == "cachediv") div1.className == "showdiv";
Euh, là, ce que tu fais, c'est que si div1 a pour classe 'cachediv', tu testes si div1 a pour classe 'showdiv'... c'est pas très cohérent :whistle:

Ce serait plutôt
Code:

1 2 if(div1.className == "cachediv") div1.className = "showdiv";

Je ne sais pas si c'est ce que tu voulais :

Code:

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
<script type="text/javascript">
function DivStatus(le_bouton)
{
	var div1 = document.getElementById("conv1");
	var div2 = document.getElementById("conv2");
	var div3 = document.getElementById("conv3");
 
	if(le_bouton == "bouton1")
	{
		div1.className = "showdiv";
		div2.className = "cachediv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton2")
	{
		div1.className = "cachediv";
		div2.className = "showdiv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton3")
	{
   		div1.className = "cachediv";
		div2.className = "cachediv";
		div3.className = "showdiv";
	}
}
</script>
<style type="text/css">
	.cachediv{
		display:none;
	}
	.showdiv{
		display:block;
	}
</style>
<div name="conv1" id="conv1" class="showdiv">
	<a href="javascript:DivStatus('bouton2')"><img id="mon_image2" src="images/convic/image2" alt="mon_image2" name="mon_image2" width="170" height="170" border="0" /></a>
	<a href="javascript:DivStatus('bouton3')"><img id="mon_image3" src="images/convic/image3" alt="mon_image3" name="mon_image3" width="170" height="170" border="0" /></a>
</div>
 
<div name="conv2" id="conv2" class="cachediv">
	<a href="javascript:DivStatus('bouton1')"><img id="mon_image1" src="images/convic/image1" alt="mon_image1" name="mon_image1" width="170" height="170" border="0" /></a>
	<a href="javascript:DivStatus('bouton3')"><img id="mon_image3" src="images/convic/image3" alt="mon_image3" name="mon_image3" width="170" height="170" border="0" /></a>
</div>
 
<div name="conv3" id="conv3" class="cachediv">
	<a href="javascript:DivStatus('bouton1')"><img id="mon_image1" src="images/convic/image1" alt="mon_image1" name="mon_image1" width="170" height="170" border="0" /></a>
	<a href="javascript:DivStatus('bouton2')"><img id="mon_image2" src="images/convic/image2" alt="mon_image2" name="mon_image2" width="170" height="170" border="0" /></a>
</div>

18/11/2010, 14h09
wyllos

Alors en fait je crois avoir compris mon problème mais je sais pas comment le résoudre. Donc je vous explique:

j'ai donc 3 div avec à l'intérieur de chacune 2 images. Ces 2 images sont mes boutons c'est à dire div1 bouton2 et bouton3, div2 bouton1 et bouton3 et div3 bouton1 et bouton2.
Le souci c'est que je dois avoir au départ au moins une div visible pour avoir un groupe de bouton et la j'ai aucune div visible.

Désolé, ça fonctionne j'avais juste un problème sur les commentaires de mon code qui bloqué le code html.

Merci pour votre aide et je vais me lancer dans une formation de javascript.

Wyllos
18/11/2010, 14h17
andry.aime

Euh, as-tu au moins testé le code proposé par scourjean ou de faire la correction proposé par Bovino :koi:

Citation:

Envoyé par scourjean

Code:

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
function DivStatus(le_bouton)
{
	var div1 = document.getElementById("conv1");
	var div2 = document.getElementById("conv2");
	var div3 = document.getElementById("conv3");
 
	if(le_bouton == "bouton1")
	{
		div1.className = "showdiv";
		div2.className = "cachediv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton2")
	{
		div1.className = "cachediv";
		div2.className = "showdiv";
		div3.className = "cachediv";
	}
	else if(le_bouton == "bouton3")
	{
   		div1.className = "cachediv";
		div2.className = "cachediv";
		div3.className = "showdiv";
	}
}

Je trouve que tu as bien fait de refactoriser un peu le code de départ ^^

Je t'avoue aussi qu'en le lisant ça donne carrément envie d'aller plus loin :

Code:

1
2
3
4
5
6
7
function DivStatus(le_bouton) {
   var numActif = le_bouton.match(/bouton(\d+)/)[1];
   for (var i = 0; i < 3; ++i) {
      var div = document.getElementById("conv" + i);
      div.className = (numActif == i) ? "showdiv": "cachediv";
   }
}

Code:

1
2
3
4
5
function DivStatus(le_bouton) {
   var numActif = le_bouton.match(/bouton(\d+)/)[1];
   var i=-1;
    while( document.getElementById("conv" + (++i)) && (div.className = (numActif == i)?"showdiv":"hidediv") ){}
    }

18/11/2010, 16h30
Watilin

Il manque les œufs…
18/11/2010, 17h06
RomainVALERI

<cuisine>

Citation:

Envoyé par Watilin

Il manque les œufs…

Une excellente remarque :mrgreen:

et éventuellement pour parfumer (au choix) :

sucre vanillé
liqueur de fleur d'oranger
grand marnier
kirsch

</cuisine>
19/11/2010, 10h19
wyllos

Merci à tous cela m'a bien aidé.

Maintenant tout fonctionne bien.

Wyllos