Probleme masquer / afficher div

Signaler
Messages postés
26
Date d'inscription
samedi 23 juillet 2011
Statut
Membre
Dernière intervention
8 septembre 2012
-
Messages postés
29
Date d'inscription
jeudi 7 décembre 2000
Statut
Membre
Dernière intervention
30 octobre 2012
-
Bonjour,
J'ai une page d'accueil avec apDiv1 et apDiv2 qui s'affiche lors du démarrage.
Mas, 'aimerais que ces apDiv1 et apDiv2 disparaisse quand je clic sur un lien et fasse apparaitre une apDiv3.

Voici ce que j'ai
<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>




[javascript:visibilite('apDiv3');  Un lien ici]


S'affiche au départ div 1


S'affiche au départ div 2



S'affiche quand on click sur un lien en effacant les deux autre div

6 réponses

Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
134
bonjour


rajoute ceci dans la fonction

Code Javascript :

document.getElementById("apDiv1").style.display = "none" ;

document.getElementById("apDiv2").style.display = "none" ;
Messages postés
26
Date d'inscription
samedi 23 juillet 2011
Statut
Membre
Dernière intervention
8 septembre 2012

MErci mais dès que par exemple je rejatoute unn lien il se passe ceci

Page d'accueil: apDiv1 & apDiv2 apparaisent ---------> OK
Clic sur apDiv3 : apDiv1 & apDiv2 disparaisse et aisse apparaitre apDiv3 -------> OK
Clic sur apDiv 4 : Apdiv4 apparrait, mais apDiv3 ne s'efface pas
Messages postés
86
Date d'inscription
mardi 10 septembre 2002
Statut
Membre
Dernière intervention
17 mai 2013

et ca, ca fonctionne mieux ?


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










jako
Messages postés
26
Date d'inscription
samedi 23 juillet 2011
Statut
Membre
Dernière intervention
8 septembre 2012

Ben non sa fonctionne pas . Navré
pas grave je faire faire une page / div et créer une ancre vers la page tanpis.
Merci d'avoir essayé de m'aider .
Messages postés
86
Date d'inscription
mardi 10 septembre 2002
Statut
Membre
Dernière intervention
17 mai 2013

Il faut boucler sur tes 3 div :


 <script>
function visibilite()
{
for (i=1;i<=3;i++){
  thingId = "apDiv"+i
  targetElement = document.getElementById(thingId) ;
  if (targetElement.style.display == "none")
    {
    targetElement.style.display = "block" ;
    } else {
    targetElement.style.display = "none" ;
    }
  }
}
</script>






jako
Messages postés
29
Date d'inscription
jeudi 7 décembre 2000
Statut
Membre
Dernière intervention
30 octobre 2012

Bonjour,
En effet, si vous regardez votre code, vous verrez que vous ne modifiez que le comportement d'une div.

kazma propose de cacher deux div mais en faite, il faut allez plus loin en les cachant toutes.

Pour ma part, je ferais donc :
- cachez toutes les divs.
- puis faire le traitement que vous avez.

Pour info : La méthode de jmeunier inverse les états de visibilités des divs.

Merci de m'avoir lu.
A+