Cacher le contenu d'un DIV

**m@ximus** · 05/02/2008, 16h29

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

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
<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 html :

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

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 ?

**picwic** · 05/02/2008, 16h45

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 ?

**m@ximus** · 05/02/2008, 16h51

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.

**picwic** · 05/02/2008, 17h22

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

J'ai envie dire que tu bluffes..! Avec le code que tu as fournnis il ne risque pas d'apparaître ton bouton

quand bien même tu changes la visibilité du conteneur :

Code :

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

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

..

**m@ximus** · 05/02/2008, 19h37

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é.

**picwic** · 06/02/2008, 12h37

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.) ?

Cacher le contenu d'un DIV

JavaScript

Vue hybride

Discussions similaires

Partager

Partager