Afficher/Cacher des éléments [Débutant(e)]

**cuddy** · 05/09/2012, 18h01

Bonjour, je vias faire plus simple

J'ai une page d'accueil avec apDiv1 et apDiv2 qui s'affiche lors du démarrage.
J'aimerais que ces apDiv1 et apDiv2 disparaisse quand je clic sur un lien et fasse apparaitre une apDiv3.

Voici ce que j'ai

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
<head>
<style type="text/css">
#apDiv1 {
	position: absolute;
	width: 200px;
	height: 485px;
	z-index: 1;
	left: 175px;
	top: 6px;
}
#apDiv2 {
	position: absolute;
	width: 200px;
	height: 484px;
	z-index: 2;
	left: 378px;
	top: 6px;
}
#apDiv3 {
	position: absolute;
	width: 404px;
	height: 485px;
	z-index: 3;
	left: 174px;
	top: 6px;
}
</style>
 <script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
</head>

Code :

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

1
2
3
4
5
6
7
8
9
10
<body onload="apDiv1,apDiv2">

<a href="javascript:visibilite('apDiv3');"> Un lien ici</a>

<div id="apDiv1">S'affiche au départ div 1</div>
<div id="apDiv2">S'affiche au départ div 2</div>

<div id="apDiv3" style="display:none;">S'affiche quand on click sur un lien en effacant les deux autre div</div>
</body>

**wax78** · 05/09/2012, 18h20

Je pense que tu aurais du mettre cela dans un autre forum pour plus d'efficacité

**Mathieu.J** · 05/09/2012, 18h32

Bonjour,
J'ai déplacé le sujet.

**Vil'Coyote** · 06/09/2012, 11h32

c'est l'inverse de ton script d'affichage.
lorsque tu affiche l'un tu masque les autres.

**Vil'Coyote** · 06/09/2012, 16h23

l'appel de la fonction javascript se fait avec l'id de la div à faire 'apparaître / disparaître' donc soit tu appel ta fonction autant de fois qu'il y a de div à rendre invisible en passant leurs id . soit tu parcour le dom et tu check les div à rendre visible ou pas.

en gros va falloir te mettre au javascript.

**cuddy** · 06/09/2012, 18h24

J'ai modifier le premier message histoire de faire plus simple

**Vil'Coyote** · 07/09/2012, 11h03

en gros si on veux le faire à la sauvage sans trop chercher finement :

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
function visibilite(thingId)
{
 var targetElement;
 targetElement = document.getElementById(thingId) ;
 
 if (targetElement.style.display == "none")
 {
    targetElement.style.display = "" ;
  } 
  else 
 {
    targetElement.style.display = "none" ;
  }
 
  if( thingId == 'apDiv3')
  {
      document.getElementById('apDiv1').style.display = "none" ;
      document.getElementById('apDiv2').style.display = "none" ;
  }

}

**cuddy** · 07/09/2012, 14h07

ok merci. c'est exactement cela sauf que maintenant quand je crée et clic sur un autre lien c'est apDiv3 qui ne s'en va plus. Juste pour améliorer le truc, comme je peux mettre tout les liens ? parce que la j'ai mis apDiv3, mais j'aurais d'autre lien.

Du coup dois je mettre :

if( thingId == 'apDiv3','apDiv4','apDiv5','apDiv6',)

ou existe t'il une autre formulation ?

**vermine** · 07/09/2012, 14h16

Bonjour,

Avec des "ou"

||

Code javascript :

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

if( thingId == 'apDiv3' || thingId == 'apDiv4' || thingId == 'apDiv5' || thingId == 'apDiv6')

Mais faut voir si ce ne serait pas plus simple avec des "différent"

!= et des "et"

&& :

Code javascript :

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

if( thingId != 'apDiv1' && thingId != 'apDiv2' )

Quoique s'il faut n'afficher qu'une <div> à la fois, le plus simple est de boucler sur les <div> et si elle est affichée alors la cacher, sinon l'afficher.

**cuddy** · 07/09/2012, 14h54

Ok j'ai remplacer

Code :

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

if( thingId == 'apDiv3','apDiv4','apDiv5','apDiv6',)

par

Code :

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

if( thingId == 'apDiv3' || thingId == 'apDiv4' || thingId == 'apDiv5' || thingId == 'apDiv6')

ca j'ai compris. Ok
Parcontre

Code :

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

if( thingId != 'apDiv1' && thingId != 'apDiv2' )

Je le met a la place de quoi ?

Et j'ai encore le même problème. Une fois apparition de apdiv3 si je clic sur un autre lien il m'apparait apDiv4 , mais apdiv3 ne s'efface pas !

**vermine** · 07/09/2012, 15h16

Oui c'est pour ça que je proposais de parcourir les <div>. Si vous n'avez que des <div> du style "apDivx" dans votre page, vous pouvez tenter ceci :

Code javascript :

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
 
// Récupération de toutes les div
var tab_div = document.getElementsByTagName("div");
 
// Parcours des div
for(var i=0; i<tab_div.length; i++)
{   
     // Si la div en cours a l'id sélectionné
     if(tab_div[i].id == thingId)
     {
         // On l'affiche
         tab_div[i].style.display == "" ;
     }
     else  
     {
         // Sinon on la cache
         tab_div[i].style.display == "none" ;
     } 
}

**cuddy** · 07/09/2012, 15h45

Je reprends par ce que je suis paumé !

est ce cela ???

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
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
if( thingId == 'apDiv3' || thingId == 'apDiv4' || thingId == 'apDiv5' || thingId == 'apDiv6')
  {
      document.getElementById('apDiv1').style.display = "none" ;
      document.getElementById('apDiv2').style.display = "none" ;
  }
// Récupération de toutes les div
var tab_div = document.getElementsByTagName("div");
 
// Parcours des div
for(var i=0; i<tab_div.length; i++)
{   
     // Si la div en cours a l'id sélectionné
     if(tab_div[i].id == thingId)
     {
         // On l'affiche
         tab_div[i].style.display == "" ;
     }
     else  
     {
         // Sinon on la cache
         tab_div[i].style.display == "none" ;
     } 
}
</script>

Je suis perdu !!!! Parce que cela ne fonctionne pas.
apDiv1 & apDiv2 ---- > apparait au chargement de la page OK
Quand je clic que ApDiv3, apdiv1 & apDiv2 disparaisse et laisse apdiv 3 OK
Qund je clic sur par exemple apDIv4, apDiv3 ne s'efface pas alors que ApDiv4 apparait donc problème.

Peut être que mon script a l 'origine n'ai pas bon. Si quelqu'un veux bien essayez de le réécrire, sa serait gentil, parce que je n'y connais rien

**cuddy** · 07/09/2012, 19h28

Bon j'abandonne !!!

Je vais faire une page par div tanpis au moins sa fonctionnera comme je le veux !
Merci à tous pour votre gentilesse et votre patience

**NoSmoking** · 08/09/2012, 00h00

Bonsoir,
si toutes tes DIV ont une identification qui se suit par exemple, div_1, div_2...etc, tu peux imaginer de passer à la fonction les ID des éléments que tu veux voir apparaître et masquer les autres.

**cuddy** · 08/09/2012, 08h49

c'est ce que j'avais dans mon script au départ
apDiv1 / apDiv2 /apDiv 3 /

Mais dès que j'ai rajouter d'autre lien plus rien n'a fonctionné .

**NoSmoking** · 08/09/2012, 09h16

un exemple

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
div{
  width:100px;
  height:100px;
  border:1px solid #e0e0e0;
  display:none;
}
</style>
<script>
function affiche(){
  var arg = arguments,
      oDiv, i=1;
  // masque tout
  while( oDiv = document.getElementById( 'div_' +i)){
    oDiv.style.display = 'none';
    i++;
  }
  // affiche les choix
  for( i=0; i< arg.length; i++){
    oDiv = document.getElementById( 'div_' +arg[i]);
    oDiv.style.display = 'block';
  }
}
</script>
</head>
<body>
  <button onclick="affiche('1', '2')">Affiche 1 et 2</button>
  <button onclick="affiche('3', '4')">Affiche 3 et 4</button>
  <button onclick="affiche('1', '3', '5')">Affiche 1,3 et 5</button>
  <div id="div_1">div 1</div>
  <div id="div_2">div 2</div>
  <div id="div_3">div 3</div>
  <div id="div_4">div 4</div>
  <div id="div_5">div 5</div>
</body>
</html>

Afficher/Cacher des éléments [Débutant(e)]

Discussions similaires

Partager

Partager