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

**m@ximus** · 06/02/2008, 13h50

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 !

**picwic** · 06/02/2008, 14h41

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

Maintenant, peut-être sommes-nous en plein Vortex..?! mdr

**m@ximus** · 07/02/2008, 12h38

Fichtre diantre.

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

**picwic** · 07/02/2008, 13h01

Je viens de comprendre en te relisant

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.

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

Code :

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

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';
            }
        }
    }

**m@ximus** · 07/02/2008, 13h54

Magnifique négociation de sortie de vortex !!

Merci beaucoup.

Cacher le contenu d'un DIV

JavaScript

Discussions similaires

Partager

Partager