Afficher div et cacher les autres
Résolu/Fermé
tiralia
Messages postés
1575
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
-
13 juin 2010 à 13:16
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 - 22 juin 2010 à 11:38
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 - 22 juin 2010 à 11:38
A voir également:
- Afficher div et cacher les autres
- Cacher conversation whatsapp - Guide
- Afficher les dossiers cachés - Guide
- Comment cacher les amis sur facebook - Guide
- Afficher mot de passe wifi android - Guide
- Windows 11 afficher d'autres options - Guide
2 réponses
Salut !
<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite(thingId)
{
if(document.getElementById){
if (thingId=="boîte1"){
tabler1 = document.getElementById('boîte1');
tabler1.style.display="";
tabler2 = document.getElementById('boîte2');
tabler2.style.display="none";
}
if (thingId=="boîte2"){
tabler2 = document.getElementById('boîte2');
tabler2.style.display="";
tabler1 = document.getElementById('boîte1');
tabler1.style.display="none";
}
}
}
</script>
Voilà essaie avec ça à la place de ton script et dis moi ;)
<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite(thingId)
{
if(document.getElementById){
if (thingId=="boîte1"){
tabler1 = document.getElementById('boîte1');
tabler1.style.display="";
tabler2 = document.getElementById('boîte2');
tabler2.style.display="none";
}
if (thingId=="boîte2"){
tabler2 = document.getElementById('boîte2');
tabler2.style.display="";
tabler1 = document.getElementById('boîte1');
tabler1.style.display="none";
}
}
}
</script>
Voilà essaie avec ça à la place de ton script et dis moi ;)
tiralia
Messages postés
1575
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
255
22 juin 2010 à 11:38
22 juin 2010 à 11:38
bon, après quelques essais, j'ai fait simple: fonctionne sous ie 6+ FF et Chrome,
<script language="Javascript">
pat=1;
patbis=1;
function bascule()
{
etat=document.getElementById(pat).style.visibility;
document.getElementById(patbis).style.visibility="hidden";
if(etat=="hidden"){document.getElementById(pat).style.visibility="visible";patbis=pat;}
else{document.getElementById(pat).style.visibility="hidden";patbis=pat;}
}
</script>
il suffit d'appeler cette fonction, par un onclick, onmouseover ou autre de cette façon:
onClick="pat=1;bascule();"
puis de créer la div a afficher ou cacher:
<div id="1" style="visibility: hidden; position: relative; left: 280px; top: 58px">
<p>oooooooo<img border="0" src="titre.png" width="379" height="64"></div>
***********************************
Petite explication pour ceux qui veulent le réutiliser et le modifier:
Il faut commencer par donner une valeur a pat et patbis, qui sont les variables servant a savoir quelle div est a afficher et quelle ancienne div est a cacher
cette opération n'est exécutée qu'une fois lors du chargement de la page et permet a la fonction d'avoir une ancienne div a cacher, puisque en réalité il n'y en a pas encore^^
ensuite passons a la
première ligne de la fonction:
elle sert a savoir si la div actuelle (son numéro est dans la variable "pat") est visible ou non actuellement. cette valeur est stockée dans la variable "état"
seconde ligne:
on demande a l'ancienne div de se cacher (son numéro est dans la variable "patbis")
troisième ligne:
si l'état de la div actuelle est cachée, alors la rendre visible et copier le numéro de cette div (pat), dans la variable (patbis)
quatrième ligne:
si l'état de la div actuelle est affichée, alors la rendre invisible et copier le numéro de cette div (pat), dans la variable (patbis)
Lors de l'appel de la fonction, onClick="pat=1;bascule();"
on donne le numéro de la div que l'on veux afficher/cacher puis on appel la fonction
la div doit comporter un id qui correspond a ce que vous avez rentré dans "pat" lors de l'appel de la fonction et elle doit être cachée par défaut style="visibility: hidden;
***********************************
un exemple a copier coller pour tester
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page de test</title>
<script language="Javascript">
pat=1;
patt=1;
function bascule()
{
etat=document.getElementById(pat).style.visibility;
document.getElementById(patt).style.visibility="hidden";
if(etat=="hidden"){document.getElementById(pat).style.visibility="visible";patt=pat;}
else{document.getElementById(pat).style.visibility="hidden";patt=pat;}
}
</script>
</head>
<body>
<input type="button" onClick="pat=1;bascule();" value="On/Off">
<a href="#" onmouseover="pat=2;bascule();">ceci affiche la div 2 au survol de la souris</a>
<h1>en cliquant sur le mot suivant: <map onClick="pat=2;bascule();">bidule</map> vous afficherez la div 2 aussi</h1>
<div id="1" style="visibility: hidden; position: relative; left: 280px; top: 58px">
<p>ceci est la div1</div>
<div name="2" id="2" style="visibility: hidden; position: relative; left: 100px; top: 58px"> Ceci est la div 2</div>
</body>
</html>
*****************************************
Petit bonus si vous voulez que la div s'affiche au milieu de l'écran et se déplace sans a coups quant vous jouez avec vos ascenseurs:
<div name="2" id="2"style="visibility: hidden; position: fixed; left: 50%; top: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; border: 1px solid #333; background-color: #eee;"> Ceci est la div 2</div>
<script language="Javascript">
pat=1;
patbis=1;
function bascule()
{
etat=document.getElementById(pat).style.visibility;
document.getElementById(patbis).style.visibility="hidden";
if(etat=="hidden"){document.getElementById(pat).style.visibility="visible";patbis=pat;}
else{document.getElementById(pat).style.visibility="hidden";patbis=pat;}
}
</script>
il suffit d'appeler cette fonction, par un onclick, onmouseover ou autre de cette façon:
onClick="pat=1;bascule();"
puis de créer la div a afficher ou cacher:
<div id="1" style="visibility: hidden; position: relative; left: 280px; top: 58px">
<p>oooooooo<img border="0" src="titre.png" width="379" height="64"></div>
***********************************
Petite explication pour ceux qui veulent le réutiliser et le modifier:
Il faut commencer par donner une valeur a pat et patbis, qui sont les variables servant a savoir quelle div est a afficher et quelle ancienne div est a cacher
cette opération n'est exécutée qu'une fois lors du chargement de la page et permet a la fonction d'avoir une ancienne div a cacher, puisque en réalité il n'y en a pas encore^^
ensuite passons a la
première ligne de la fonction:
elle sert a savoir si la div actuelle (son numéro est dans la variable "pat") est visible ou non actuellement. cette valeur est stockée dans la variable "état"
seconde ligne:
on demande a l'ancienne div de se cacher (son numéro est dans la variable "patbis")
troisième ligne:
si l'état de la div actuelle est cachée, alors la rendre visible et copier le numéro de cette div (pat), dans la variable (patbis)
quatrième ligne:
si l'état de la div actuelle est affichée, alors la rendre invisible et copier le numéro de cette div (pat), dans la variable (patbis)
Lors de l'appel de la fonction, onClick="pat=1;bascule();"
on donne le numéro de la div que l'on veux afficher/cacher puis on appel la fonction
la div doit comporter un id qui correspond a ce que vous avez rentré dans "pat" lors de l'appel de la fonction et elle doit être cachée par défaut style="visibility: hidden;
***********************************
un exemple a copier coller pour tester
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page de test</title>
<script language="Javascript">
pat=1;
patt=1;
function bascule()
{
etat=document.getElementById(pat).style.visibility;
document.getElementById(patt).style.visibility="hidden";
if(etat=="hidden"){document.getElementById(pat).style.visibility="visible";patt=pat;}
else{document.getElementById(pat).style.visibility="hidden";patt=pat;}
}
</script>
</head>
<body>
<input type="button" onClick="pat=1;bascule();" value="On/Off">
<a href="#" onmouseover="pat=2;bascule();">ceci affiche la div 2 au survol de la souris</a>
<h1>en cliquant sur le mot suivant: <map onClick="pat=2;bascule();">bidule</map> vous afficherez la div 2 aussi</h1>
<div id="1" style="visibility: hidden; position: relative; left: 280px; top: 58px">
<p>ceci est la div1</div>
<div name="2" id="2" style="visibility: hidden; position: relative; left: 100px; top: 58px"> Ceci est la div 2</div>
</body>
</html>
*****************************************
Petit bonus si vous voulez que la div s'affiche au milieu de l'écran et se déplace sans a coups quant vous jouez avec vos ascenseurs:
<div name="2" id="2"style="visibility: hidden; position: fixed; left: 50%; top: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; border: 1px solid #333; background-color: #eee;"> Ceci est la div 2</div>
16 juin 2010 à 14:26
17 juin 2010 à 15:12
Je ne souhaite pas rafraichir la page, sinon, c'est très simple en php ou javascript d'afficher ou non tel ou tel div.
merci tout de même pour ta réponse
17 juin 2010 à 15:14
18 juin 2010 à 09:03
Oui c'est sur que s'il y en a 50...
Je t'envoie autre chose que j'ai pu trouvé même si je pense que ce n'est pas ça que tu recherche, on sait jamais ^^
<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite_variable(thingId)
{
document.getElementById('boite1').style.display = 'none';
document.getElementById('boite2').style.display = 'none';
if(document.getElementById(thingId))
document.getElementById(thingId).style.display='';
}
</script>