Masquer/ d�masquer des Div avec JavaScript

**Jejey14** · 05/02/2019, 18h42

Bonsoir,

Je me tournes vers vous car je suis dans une impasse !

Le principe est d'afficher � chaque clique sur un lien, un texte diff�rent au m�me endroit : si je clique sur "Link1" alors "1er texte" apparait, puis si je clique sur "Link2", 2i�me texte" apparait ET "1er texte" dispara�t, etc

J'aimerais que ma 1ere div qui est rattach�e � "Link1" soit visible d�s le d�but et si je rappuie sur "Link1" elle se recharge or elle ne l'est que par appui sur le lien ce qui est logique !

J'ai essay� de cr�er une autre fonction pour id="1er" mais �a s�entrem�le du coup que contiendra t'elle ?

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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script>
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
 
<body>
<a  onclick="showdiv('1er'); " href="#">Link1</a>
<a  onclick="showdiv('2ieme'); " href="#">Link2</a>
<a  onclick="showdiv('3ieme'); " href="#">Link3</a>
<a  onclick="showdiv('4ieme'); " href="#">Link4</a>
<a  onclick="showdiv('5ieme'); " href="#">Link5</a>
 
<div id="1er"     style="display: none;">1er texte</div>
<div id="2ieme"   style="display: none;">2 ieme texte</div>
<div id="3ieme"   style="display: none;">3 ieme texte</div>
<div id="4ieme"   style="display: none;">4 ieme texte</div>
<div id="5ieme"   style="display: none;">5 ieme texte</div>
</body>
</html>

Merci

Invit� · 05/02/2019, 20h23

Bonjour,

1- solution 1 :

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
  <a onclick="showdiv(0); " href="#">Link1</a>
  <a onclick="showdiv(1); " href="#">Link2</a>
  <a onclick="showdiv(2); " href="#">Link3</a>
  <a onclick="showdiv(3); " href="#">Link4</a>
  <a onclick="showdiv(4); " href="#">Link5</a>
 
  <div id="divTexte" style="display:none;"></div>

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
    var textes = [
      '1er texte',
      '2ème texte',
      '3ème texte',
      '4ème texte',
      '5ème texte'
    ];
 
    function showdiv(id) {
      var divTexte = document.getElementById('divTexte');
      divTexte.style.display = 'block';
      divTexte.textContent = textes[id]; // si on peut avoir des balises HTML dans le "texte", remplacer .textContent par .innerHTML 
    }

2- solution 2 :

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
<a onclick="showdiv(1); " href="#">Link1</a>
<a onclick="showdiv(2); " href="#">Link2</a>
<a onclick="showdiv(3); " href="#">Link3</a>
<a onclick="showdiv(4); " href="#">Link4</a>
<a onclick="showdiv(5); " href="#">Link5</a>
 
<div class="divTexte" id="divTexte-1">1er texte</div>
<div class="divTexte" id="divTexte-2">2ème texte</div>
<div class="divTexte" id="divTexte-3">3ème texte</div>
<div class="divTexte" id="divTexte-4">4ème texte</div>
<div class="divTexte" id="divTexte-5">5ème texte</div>

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

.divTexte { display: none; }

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function showdiv(id) {
  var divTextes = document.querySelectorAll('.divTexte');
  for (var i = 0, n = divTextes.length; i < n; i++) {
    divTextes[i].style.display = 'none';
  }
  document.getElementById('divTexte-'+id).style.display = 'block';
}

**Jejey14** · 05/02/2019, 21h35

Bonsoir,

Merci beaucoup pour votre rapidit�: en fait c'est un peu un mix de vos codes

Envoy� par jreaux62

2- solution 2 : ...

La solution 2 est parfaite mais au tout d�but j'ai : Nom : link.PNG
Affichages : 113
Taille : 3,3 Ko

alors que j'aimerais avoir seulement : Nom : texte1.PNG
Affichages : 122
Taille : 1,7 Ko

Envoy� par eleydet

Le code ci-dessous r�sout-il le probl�me?

Lorsque j'appuie sur "Link2", texte2 appara�t en bas de Texte1 mais au bout de plusieurs clics de souris le script se met en place et tout fonctionne ^^

Je suis d�sol� de mettre mal exprim� d�s le d�but mais la finalit� est ma page d'accueil qui affiche par d�faut Texte1 de Link1 et lors du clic sur Link2 alors texte2 appara�t et texte1 disparait

Nom : inbox.PNG
Affichages : 111
Taille : 13,0 Ko

Nom : inbox.PNG
Affichages : 111
Taille : 13,0 Ko

Encore merci de votre temps

Invit� · 05/02/2019, 21h48

C'est effectivement un mixe des 2.

Tu devrais �tre capable de trouver tout seul, non ?

Sinon, il suffit d'ajouter le bout de CSS :

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
.divTexte { display: none; }
#divTexte-1 { display: block; }

**Jejey14** · 05/02/2019, 22h03

Je devrais y arriver en th�orie oui

en pratique ... je d�bute

A suivre

**Jejey14** · 05/02/2019, 22h18

Envoy� par jreaux62

Sinon, il suffit d'ajouter le bout de CSS :
...

C'est exactement ce que je cherchais � faire dans le sens o� cela ne fonctionnais pas lorsque j�entrem�lais class et id et puis Miracle ...

**eleydet** · 05/02/2019, 20h31

Bonsoir,

Je n'ai pas trop compris... Le code ci-dessous r�sout-il le probl�me?

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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script>
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
 
<body>
<a  onclick="showdiv('1er'); " href="#">Link1</a>
<a  onclick="showdiv('2ieme'); " href="#">Link2</a>
<a  onclick="showdiv('3ieme'); " href="#">Link3</a>
<a  onclick="showdiv('4ieme'); " href="#">Link4</a>
<a  onclick="showdiv('5ieme'); " href="#">Link5</a>
 
<div id="1er"     style="display: block;">1er texte</div>
<div id="2ieme"   style="display: none;">2 ieme texte</div>
<div id="3ieme"   style="display: none;">3 ieme texte</div>
<div id="4ieme"   style="display: none;">4 ieme texte</div>
<div id="5ieme"   style="display: none;">5 ieme texte</div>
</body>
</html>

Masquer/ d�masquer des Div avec JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager