Sujet Précédent Sujet Suivant

Probleme masquer / afficher div

cs_lyamcarter Messages postés 26 Date d'inscription samedi 23 juillet 2011 Statut Membre Dernière intervention 8 septembre 2012 - 7 sept. 2012 à 08:06
guilty90 Messages postés 29 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 30 octobre 2012 - 30 oct. 2012 à 23:02

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

A voir également:

Probleme masquer / afficher div
Afficher un tableau en php - Conseils pratiques -PHP
Afficher json html - Conseils pratiques -Javascript
Afficher userform vba ✓ - Forum Visual Basic
Afficher en arabe - Forum Delphi / Pascal
Div java ✓ - Forum Java

6 réponses

Réponse 1 / 6

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
7 sept. 2012 à 22:11

bonjour

rajoute ceci dans la fonction

Code Javascript :

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

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

Réponse 2 / 6

cs_lyamcarter Messages postés 26 Date d'inscription samedi 23 juillet 2011 Statut Membre Dernière intervention 8 septembre 2012
8 sept. 2012 à 08:43

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

Réponse 3 / 6

jmeunier Messages postés 86 Date d'inscription mardi 10 septembre 2002 Statut Membre Dernière intervention 17 mai 2013
8 sept. 2012 à 09:41

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

Réponse 4 / 6

cs_lyamcarter Messages postés 26 Date d'inscription samedi 23 juillet 2011 Statut Membre Dernière intervention 8 septembre 2012
8 sept. 2012 à 16:10

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 .

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

jmeunier Messages postés 86 Date d'inscription mardi 10 septembre 2002 Statut Membre Dernière intervention 17 mai 2013
9 sept. 2012 à 11:17

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

Réponse 6 / 6

guilty90 Messages postés 29 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 30 octobre 2012
30 oct. 2012 à 23:02

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+

Discussions similaires

afficher un tableau en php

Solution pour cacher un mot de passe d'accès d'une page

coller deux div avec du css

la division en java

SELECTIONNER les 5 dernière ligne d'une table

Votre réponse

Discussions similaires