Cacher le contenu d'un DIV

Version imprimable

Bonjour à tous,
j'ai trois div superposés et j'affiche l'un ou l'autre pour faire un système d'onglet :

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
<html>
<head>
 
<script type="text/javascript">
        function showDiv(index) {
                for(i=1;i<=3;i++) {
                        if (i==index) {
                                document.getElementById('Layer' + i).style.visibility='visible';
                        } else {
                                document.getElementById('Layer' + i).style.visibility='hidden';
                        }
                }
        }
</script>
 
</head>
 
<body>
 
	<a href="#" onClick="showDiv(1)">Onglet 1</a> | <a href="#" onClick="showDiv(2)">Onglet 2</a> | <a href="#" onClick="showDiv(3)">Onglet 3</a>
 
	<div id="Layer1" style="position:absolute; left:50px; top:50px; width:200px; height:200px; z-index:10; border: 1px none #000000;visibility:hidden;">
		<p>contenu de div 1</p>
	</div>
 
	<div id="Layer2" style="position:absolute; left:50px; top:50px; width:200px; height:200px; z-index:10; border: 1px none #000000;visibility:hidden;">
		<p>&nbsp;</p>
		<p>contenu de div 2</p>
	</div>
 
	<div id="Layer3" style="position:absolute; left:50px; top:50px; width:200px; height:200px; z-index:10; border: 1px none #000000;visibility:hidden;">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>contenu de div 3</p>
	</div>
 
</body>
 
</html>

Tout fonctionne.
En revanche si je rajouter un petit truc dans mon premier div, ça coince.

Code:

1
2
3
4
5
<div id="Layer1" style="position:absolute; left:50px; top:50px; width:200px; height:200px; z-index:10; border: 1px none #000000;visibility:hidden;">
		<p>contenu de div 1</p>
		<a href="#" onClick="document.getElementById('btn1').style.visibility='visible'">Voir</a>
		<input type="button" id="btn1" style="visibility: hidden;" value="bouton"/>
	</div>

Le bouton que je rends visible reste visible sur tous les onlgets et c'est pas ce que je veux !

Est-ce que quelqu'un a une piste ?

05/02/2008, 16h45
picwic

Bonjour,

Je viens de tester avec FF2, IE6 et Opera9 sous Windows.. Je n'arrive pas à reproduire ton bug (quand je passe de l'onglet 1 au 2, le bouton Voir disparaît).

Sur quelle plateforme travailles-tu ?
05/02/2008, 16h51
m@ximus

Je vois le bug sour Windows XP avec IE7 et FF2 !!
Je le vois aussi avec safari (je ne me rappelles pas de la version mais récente)

Mais petite précision :
Ce n'est pas le lien Voir qui me pose problème mais le bouton bouton que ce lien fait apparaître quand on clique dessus.
05/02/2008, 17h22
picwic

Le bouton apparaît quand tu cliques sur l'onglet 1 ???? 8O

J'ai envie dire que tu bluffes..! Avec le code que tu as fournnis il ne risque pas d'apparaître ton bouton :nono: quand bien même tu changes la visibilité du conteneur :

Code:

<input type="button" id="btn1" style="visibility: hidden;" value="bouton"/>

..
05/02/2008, 19h37
m@ximus

Dans l'onglet 1 quand je clique sur le line "Voir" le bouton apparaît

(docment.getElement.....style.visibility=visible;)

Et celui-ci (le bouton) devient alors visible sur les trois onglets même quand l'onglet 1 est caché.
06/02/2008, 12h37
picwic

m@ximus, le code que tu as publié dans ton premier message ne peux pas faire ce que tu décris.

Est-ce un extrait sorti de son contexte ? As-tu copié/collé du code généré par un plugin (firebug par ex.) ?
06/02/2008, 13h50
m@ximus

Bon je vois que je n'ai pas été très clair !!

En fait le premier code fait apparaître trois onglet et ça fonctionne.

Ensuite il faut remplacer le premier div par le deuxième bout de code où apparaît le fameux (Agrrrh) bouton !

J'espère que cette précision améliorera la lecture de mon post !
06/02/2008, 14h41
picwic

Rassure-toi c'est bien ce que j'ai fais. D'où mes questions...

Maintenant, peut-être sommes-nous en plein Vortex..?! mdr
07/02/2008, 12h38
m@ximus

2 pièce(s) jointe(s)

Fichtre diantre.

Est-ce que les deux fichiers joints seront plus forts que ce fichu vortex ?

Je viens de comprendre en te relisant

Citation:

Envoyé par m@ximus

Mais petite précision :
Ce n'est pas le lien Voir qui me pose problème mais le bouton bouton que ce lien fait apparaître quand on clique dessus.

Je n'avais pas cliqué sur le fameux lien.. Sortie du Vortex. :mouarf:

Tu devrais plutôt afficher/cacher tes onglets avec la propriété display:
Code:

1 2 3 4 5 6 7 8 9 10 function showDiv(index) { for(i=1;i<=3;i++) { if (i==index) { document.getElementById('Layer' + i).style.display='block'; } else { document.getElementById('Layer' + i).style.display='none'; } } }

07/02/2008, 13h54
m@ximus

Magnifique négociation de sortie de vortex !!

Merci beaucoup.