Afficher/Masquer un bloc DIV

**prof2zik60** · 29/10/2022, 12h11

Bonjour,

Je ne sais pas si je poste mon message dans la bonne section du forum. Veuillez m'en excuser à l'avance, mais c'est la première fois que je poste ici.

Me voilà bien embêté ! :o

Depuis plusieurs jours, je cherche à faire apparaître un bloc au clic sur un onglet (<li> avec tabindex), jusque là, pas trop de soucis. Mes blocs s'affichent et s'effacent tant que je clic sur les onglets.

C'est maintenant que cela se corse !!

Dès que je clic en dehors de mes onglets, le bloc affiché s'efface à nouveau. Là je comprends encore. Le fait de perdre le focus de l'onglet, normal tout s'efface. :colere2:

Ma demande est la suivante :

Y a-t-il un moyen de garder le focus sur l'onglet actif même si on clic ailleurs sur la page ?

Je suis débutant en JS et je suis sur un projet perso pour gérer mes élèves. :magicien:

Voici mes bouts de codes :

HTML

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
40
41
42
43
44
45
46
47
<fieldset id="infosFact">
   <legend>Informations de Facturations</legend>
      <div class="totalFact">
        <p>Total Facturation</p>
        <h3>0,00€</h3>
     </div>
     <div class="totalSelect">
        <p>Total Selection</p>
        <h3>0,00€</h3>
      </div>
      <div class="totalNoRegle">
          <p>Total "Non Réglé"</p>
          <h3>0,00€</h3>
      </div>
 </fieldset>
 
 <fieldset id="infosVers">
    <legend>Informations de Versements</legend>
       <div class="totalSelectVers">
          <p>Total Sélection</p>
          <h3>0,00€</h3>
        </div>
        <div class="CotisFact">
            <p>Cotisations Facturées</p>
            <h3>0,00€</h3>
        </div>
        <div class="ecartFact">
           <p>Ecart Facturation</p>
           <h3>0,00€</h3>
        </div>
 
       <div id="panneau">
          <ul id="onglets" class="clearfix">
             <li tabindex="1">Informations</li>
              <li tabindex="2">Liste Inscrits</li>
              <li id="fact" tabindex="3">Facturations</li>
              <li id="vers" tabindex="4">Versements</a</li>
              <li tabindex="5">Tarifications</li>
            </ul>
            <ul id="contenus">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

CSS

Code css :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/* Informations Facturations et Versements */
 
#infosFact, #infosVers {
  display: none;
}
 
#infosFact, #infosVers {
  border: 2px ridge lightgray;
  width: 80.5%;
  align-items: center;
  margin-top: 0;
}
 
#infosFact, #infosVers,
#infosFact legend, #infosVers legend {
   background-color: lightblue;
}
 
#infosFact p, #infosFact h3,
#infosVers p, #infosVers h3 {
  margin: 0;
  padding: 0;
}
 
#infosFact p, #infosVers p {
  text-align: center;
}
 
#infosFact h3, #infosVers h3 {
  text-align: center;
  margin: 2% 0 0 0;
}
 
.totalFact, .totalSelect, .totalNoRegle,
.totalSelectVers, .CotisFact, .ecartFact {
  width: 40%;
  height: 38px;
}
 
 
#panneau {
  margin: 0;
  padding: 0.15%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
}
 
#panneau #onglets {
  margin: 0;
  padding: 0;
}
 
#panneau #onglets li {
  float: left;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 0 8px 0 8px;
  margin: 0;
  color: rgba(0, 0, 0, 0.4);
  list-style: none;
  font-size: 0.8em;
  font-weight: bold;
  cursor: default;
}
 
#panneau #onglets li:hover {
  background-color: #2f67ff;
  color: rgb(240, 248, 255, 0.4);
}
 
#panneau #onglets li.actif {
  background: whitesmoke;
  color: black;
}
 
#panneau #contenus {  
  margin:  0 0 0 0;
  padding: 0 0 0 0;
  height: 41vh;
}
 
#panneau #contenus li {
  /*Je défini les propriétés communes à ts les contenus*/
  background: whitesmoke;
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;
  /*et je les masque*/
  display: none;
}
 
#panneau #contenus li.actif {  
  /* j'affiche uniquement le li de class actif */
  display: block;
}
 
  /***** HACKS CSS *******/
 
.clearfix:before, .clearfix:after {
  content: " "; 
  display: table; 
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}

JS Onglets

Code :

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
var onglets = document.getElementById("onglets");
var contenus = document.getElementById("contenus");
 
var liOnglet = onglets.getElementsByTagName("li");
var liContenu = contenus.getElementsByTagName("li");
 
liOnglet[0].className = "actif";
liContenu[0].className = "actif";
 
for (var i = 0; i < liOnglet.length; i++){
	liOnglet[i].num = i;
 
    liOnglet[i].addEventListener("click", function(){
 
		for (var j = 0; j < liOnglet.length; j++){
			liOnglet[j].className="";
			liContenu[j].className="";
		}
 
		liOnglet[this.num].className="actif";
		liContenu[this.num].className="actif";
	});
}

JS Affichage

Code :

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
/* Afficher Informations de Facturations */
 
document.getElementById('fact').addEventListener("focus", afficherFact);
 
function afficherFact() {
  document.getElementById('infosFact').style.display = "flex";
}
 
/* Masquer Informations de Facturations */
 
document.getElementById('fact').addEventListener("blur", masquerFact);
 
function masquerFact() {
  document.getElementById('infosFact').style.display = "none";
}
 
/* Afficher Informations de Versements */
 
document.getElementById('vers').addEventListener("focus", afficherVers);
 
function afficherVers() {
  document.getElementById('infosVers').style.display = "flex";
}
 
/* Masquer Informations de Versements */
 
document.getElementById('vers').addEventListener("blur", masquerVers);
 
function masquerVers() {
  document.getElementById('infosVers').style.display = "none";
}

Merci d'avance pour me mettre sur la voie (je ne demande pas une solution toute faite (sauf si un bon samaritain... :-°))
Vous souhaitant une bonne journée, ou soirée (à prendre en fonction de l'heure de votre lecture)

.

Michel Diot

Débutant webmaster.

**mathieu** · 29/10/2022, 13h27

quand je teste votre code, j'ai déjà un souci avec les balises fieldset avant même de voir les onglets.
au chargement de la page, je vois juste la partie "Informations de Facturations" mais "Informations de Versements" est caché, je suppose que ce n'est pas ce que vous souhaitez ?

**prof2zik60** · 31/10/2022, 09h12

Bonjour Mathieu,

merci d'avoir répondu à ma demande.

Pourtant, en passant mon code dans un Replit, cela fonctionne.

Alors, je reprends un peu mes explications :

Quand la page s'affiche, normalement, je ne doit pas voir mes blocs "Informations de Facturations" et "Informations de Versements".
C'est en cliquant sur l'onglet Facturations que les "Informations de Facturations" doivent apparaître et idem pour les Versements.
J'ai peut-être oublié une partie du code. Oups ! Désolé.

Mais quand je clic en dehors de l'onglet, le bloc qui apparaît, s'efface, alors que je voudrais qu'il reste tant que je n'est pas changer d'onglet.
Je ne sais pas si mes explications sont suffisamment claire.

Je remets mes bouts de code après quelques modifications/améliorations:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="infos-resp">
    <div class="name-resp">
      <label for="name_resp">Nom Prénom Responsable :*</label>
      <input type="text" name="name_resp" id="name_resp" autofocus>
      <fieldset id="infosFact">
        <legend>Informations de Facturations</legend>
        <div class="totalFact">
          <p>Total Facturation</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalSelect">
          <p>Total Selection</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalNoRegle">
          <p>Total "Non Réglé"</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
 
      <fieldset id="infosVers">
        <legend>Informations de Versements</legend>
        <div class="totalSelectVers">
          <p>Total Sélection</p>
          <h3>0,00€</h3>
        </div>
        <div class="CotisFact">
          <p>Cotisations Facturées</p>
          <h3>0,00€</h3>
        </div>
        <div class="ecartFact">
          <p>Ecart Facturation</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
    </div>
    <div id="panneau">
      <ul id="onglets" class="clearfix">
        <li tabindex="1">Informations</li>
        <li tabindex="2">Liste Inscrits</li>
        <li id="fact" tabindex="3">Facturations</li>
        <li id="vers" tabindex="4">Versements</a</li>
        <li tabindex="5">Tarifications</li>
      </ul>
      <ul id="contenus">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <script src="change_onglet.js"></script>
    <script src="afficherMasquer.js"></script>

Code CSS :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
legend {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient( to bottom, rgb(124, 124, 124), rgba(255, 255, 255, 0)) 0.5 40%;
}
 
.name-resp { 
  height: 200px;
  flex-direction: column;
  padding: 1.5%;
}
 
#name_resp {
  width: 85%;
  padding: 0;
  margin: 1% 0 1% 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  border: 3px ridge lightgray;
}
 
#infosFact, #infosVers {
  display: flex;
}
 
#infosFact, #infosVers {
  display: none;
  border: 2px ridge lightgray;
  width: 80.5%;
  align-items: center;
  margin-top: 0;
}
 
#infosFact, #infosVers,
#infosFact legend, #infosVers legend {
   background-color: lightblue;
}
 
#infosFact p, #infosFact h3,
#infosVers p, #infosVers h3 {
  margin: 0;
  padding: 0;
}
 
#infosFact p, #infosVers p {
  text-align: center;
}
 
#infosFact h3, #infosVers h3 {
  text-align: center;
  margin: 2% 0 0 0;
}
 
.totalFact, .totalSelect, .totalNoRegle,
.totalSelectVers, .CotisFact, .ecartFact {
  width: 40%;
  height: 38px;
}
 
 
#panneau {
  margin: 0;
  padding: 0.15%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
}
 
#panneau #onglets {
  margin: 0;
  padding: 0;
}
 
#panneau #onglets li {
  float: left;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 0 8px 0 8px;
  margin: 0;
  color: rgba(0, 0, 0, 0.4);
  list-style: none;
  font-size: 0.8em;
  font-weight: bold;
  cursor: default;
}
 
#panneau #onglets li:hover {
  background-color: #2f67ff;
  color: rgb(240, 248, 255, 0.4);
}
 
#panneau #onglets li.actif {
  background: whitesmoke;
  color: black;
}
 
#panneau #contenus {  
  margin:  0 0 0 0;
  padding: 0 0 0 0;
  height: 41vh;
}
 
#panneau #contenus li {
  /*Je défini les propriétés communes à ts les contenus*/
  background: whitesmoke;
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;
  /*et je les masque*/
  display: none;
}
 
#panneau #contenus li.actif {  
  /* j'affiche uniquement le li de class actif */
  display: block;
}
 
  /***** HACKS CSS *******/
 
.clearfix:before, .clearfix:after {
  content: " "; 
  display: table; 
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}

JS change_onglet.js

Code :

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
var onglets = document.getElementById("onglets");
var contenus = document.getElementById("contenus");
 
var liOnglet = onglets.getElementsByTagName("li");
var liContenu = contenus.getElementsByTagName("li");
 
liOnglet[0].className = "actif";
liContenu[0].className = "actif";
 
for (var i = 0; i < liOnglet.length; i++){
	liOnglet[i].num = i;
 
    liOnglet[i].addEventListener("click", function(){
 
		for (var j = 0; j < liOnglet.length; j++){
			liOnglet[j].className="";
			liContenu[j].className="";
		}
 
		liOnglet[this.num].className="actif";
		liContenu[this.num].className="actif";
	});
}

JS afficherMasquer.js

Code :

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
/* Masquer Informations de Facturations */
 
document.getElementById('fact').addEventListener("blur", masquerFact);
 
function masquerFact() {
  document.getElementById('infosFact').style.display = "none";
}
 
/* Afficher Informations de Versements */
 
document.getElementById('vers').addEventListener("focus", afficherVers);
 
function afficherVers() {
  document.getElementById('infosVers').style.display = "flex";
}
 
/* Masquer Informations de Versements */
 
document.getElementById('vers').addEventListener("blur", masquerVers);
 
function masquerVers() {
  document.getElementById('infosVers').style.display = "none";
}

Merci pour votre aide.

Michel

**mathieu** · 31/10/2022, 09h40

dans le code du 1er message, il manquait une balise fermante "fieldset" donc je ne testais pas la bonne structure.
là dans votre 2e message, il manque encore une balise fermante "div" mais je crois que je comprends mieux ce que vous voulez faire.

déjà je vous conseille de ne pas utiliser le code qui est dans "afficherMasquer.js" mais plutot de mettre les contenus des fieldset directement dans les balises "ul#contenus li".

**prof2zik60** · 31/10/2022, 10h12

Re bonjour et merci pour votre réponse.

Mes blocs fieldset doivent s'afficher au-dessus des onglets. Dans les balises "ul#contenus li" il y a un tableau récapitulatif des facturations sur l'année. Idem pour Versements.
Donc je ne peux pas mettre mon bloc fieldset dans cet ul.

Je pense que mes explications ne sont pas suffisamment claire. Je m'en excuse...

Si vous passez par Replit, vous verrez que tout fonctionne, jusqu'au moment ou l'onglet actif perd le focus.

Ce que je désire faire, c'est garder mon bloc affiché même si l'onglet correspondant perd le focus en cliquant dans le corps de l'onglet.

Merci pour votre aide.

Michel

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="infos-resp">
    <div class="name-resp">
      <label for="name_resp">Nom Prénom Responsable :*</label>
      <input type="text" name="name_resp" id="name_resp" autofocus>
      <fieldset id="infosFact">
        <legend>Informations de Facturations</legend>
        <div class="totalFact">
          <p>Total Facturation</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalSelect">
          <p>Total Selection</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalNoRegle">
          <p>Total "Non Réglé"</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
 
      <fieldset id="infosVers">
        <legend>Informations de Versements</legend>
        <div class="totalSelectVers">
          <p>Total Sélection</p>
          <h3>0,00€</h3>
        </div>
        <div class="CotisFact">
          <p>Cotisations Facturées</p>
          <h3>0,00€</h3>
        </div>
        <div class="ecartFact">
          <p>Ecart Facturation</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
    </div>
  </div>
  <div id="panneau">
    <ul id="onglets" class="clearfix">
      <li tabindex="1">Informations</li>
      <li tabindex="2">Liste Inscrits</li>
      <li id="fact" tabindex="3">Facturations</li>
      <li id="vers" tabindex="4">Versements</a< /li>
      <li tabindex="5">Tarifications</li>
    </ul>
    <ul id="contenus">
      <li></li>
      <li></li>
      <li>Tableau Récapitulatif</li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="change_onglet.js"></script>
  <script src="afficherMasquer.js"></script>
 
  <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
 
</html>

**mathieu** · 31/10/2022, 10h37

je ne connais pas replit. j'ai fait une recherche qui m’amène au site replit.com mais on me demande de me connecter donc je ne pense pas que ça va m'aider à vous aider.

pour la structure de votre page, si le choix d'un onglet doit afficher des informations au dessus et en dessous des onglets, essayez cette structure :

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
  <div id="panneau">
    <ul id="contenus_audessus">
      <li>un fieldset ici</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="onglets" class="clearfix">
      <li tabindex="1">Informations</li>
      <li tabindex="2">Liste Inscrits</li>
      <li id="fact" tabindex="3">Facturations</li>
      <li id="vers" tabindex="4">Versements</li>
      <li tabindex="5">Tarifications</li>
    </ul>
    <ul id="contenus_dessous">
      <li></li>
      <li></li>
      <li>Tableau Récapitulatif</li>
      <li></li>
      <li></li>
    </ul>
  </div>

**prof2zik60** · 31/10/2022, 11h10

Effectivement, si vous ne connaissez pas, cela ne va pas l'aider.

Je voulais mettre une vidéo de ce que j'aimerais faire, mais je vois qu'on ne peu mettre que des vidéos déjà en ligne.
Est-ce possible de vous l'envoyer en privé ?

Je vais essayer de mettre en place votre idée et je vous tiens au courant si cela fonctionne.

Merci.

Je ne met pas encore résolu, je verrais cela une fois mon problème réglé.

**SpaceFrog** · 02/11/2022, 11h40

un exemple glané dans un autre post du forum

https://jsbin.com/qomuhufoda/edit?html,output

**NoSmoking** · 02/11/2022, 14h42

Bonjour,
tu peux également regarder :

↪ Affiche/masque one or more

**prof2zik60** · 05/11/2022, 10h17

Bonjour à tous,

merci pour toutes ces réponses. Désolé de répondre un peu tardivement: en plein travaux (pas informatiques).

Je vais étudié de près les idées que vous m'avez donnés.

Je vous tiens au courant pour la suite.

Bonne journée.

Michel

Un musicien ne se trompe jamais, il improvise.

**prof2zik60** · 16/11/2022, 10h09

Bonjour à toutes & tous.

Tout d'abord, merci à NoSmoking pour le bout de code. Jai réussi à faire ce que je voulais (en partie) en ajoutant les deux classes de mes blocs cachés dans la partie "récup. des éléments concernés".
Au click sur l'onglet "Facturations", j'affiche bien mes deux blocs correspondants. Idem pour l'onglet Versement. Et bien sûr, sans que les blocs "Informations de Facturations" et Informations de Versements" ne disparaissent quand on clic ailleurs.

Bien sûr, et cela ne serait pas drôle, il intervient un autre soucis que je cherche à résoudre depuis quelques jours :

Au click sur mes boutons (que j'ai mis en forme pour qu'ils ressembles à des boutons d'onglets), je ne parviens pas à les faire changer de couleur dès qu'ils deviennent "actif".
J'ai bien essayé d'ajouter une classe "actif" à chaque onglet au moment du click, mais je ne parviens à rien. Je ne comprends pas comment faire.

Auriez-vous une idée de comment pratiquer ? (et comme déjà dit dans le premier message : je suis pas bien bon en JS. Du mal à comprendre la logique, mais j'y arriverait un jour.

)

Merci d'avance pour votre aide.

Bonne journée.

Michel

Je remets les codes correspondants :

HTML

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="infos">
    <fieldset id="infosFact">
      <legend>Informations de Facturations</legend>
      <div class="totalFact">
        <p>Total Facturation</p>
        <h3>0,00€</h3>
      </div>
      <div class="totalSelect">
        <p>Total Selection</p>
        <h3>0,00€</h3>
      </div>
      <div class="totalNoRegle">
        <p>Total "Non Réglé"</p>
        <h3>0,00€</h3>
      </div>
    </fieldset>
 
    <fieldset id="infosVers">
      <legend>Informations de Versements</legend>
      <div class="totalSelectVers">
        <p>Total Sélection</p>
        <h3>0,00€</h3>
      </div>
      <div class="CotisFact">
        <p>Cotisations Facturées</p>
        <h3>0,00€</h3>
      </div>
      <div class="ecartFact">
        <p>Ecart Facturation</p>
        <h3>0,00€</h3>
      </div>
    </fieldset>
  </div>
  <div id="panneau">
    <ul id="onglets">
      <li data-links="section-1">Informations</li>
      <li data-links="section-2">Liste Inscrits</li>
      <li data-links="section-3, infosFact">Facturations</li>
      <li data-links="section-4, infosVers">Versements</li>
      <li data-links="section-5">Tarifications</li>
    </ul>
    <section id="section-1" class="projet">
      <h2>Section #1</h2>
      <p>Lorem...</p>
    </section>
    <section id="section-2" class="projet">
      <h2>Section #2</h2>
      <p>Maecenas...</p>
    </section>
    <section id="section-3" class="projet">
      <h2>Section #3</h2>
      <p>Donec...</p>
    </section>
    <section id="section-4" class="projet">
      <h2>Section #4</h2>
      <p>Donec...</p>
    </section>
    <section id="section-5" class="projet">
      <h2>Section #5</h2>
      <p>Donec...</p>
    </section>
  </div>
 
  <script src="script.js"></script>
 
</body>
 
</html>

CSS

Code css :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.infos {
  height: 70px;
}
 
fieldset, legend {
  background-color: antiquewhite;
}
 
legend {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient( to bottom, rgb(124, 124, 124), rgba(255, 255, 255, 0)) 0.5 40%;
}
 
/* Informations Facturations et Versements */
 
#infosFact, #infosVers {
  display: flex;
}
 
#infosFact, #infosVers {
  border: 2px ridge lightgray;
  width: 80.5%;
  align-items: center;
  margin-top: 0;
}
 
#infosFact, #infosVers,
#infosFact legend, #infosVers legend {
   background-color: lightblue;
}
 
#infosFact p, #infosFact h3,
#infosVers p, #infosVers h3 {
  margin: 0;
  padding: 0;
}
 
#infosFact p, #infosVers p {
  text-align: center;
}
 
#infosFact h3, #infosVers h3 {
  text-align: center;
  margin: 2% 0 0 0;
}
 
.totalFact, .totalSelect, .totalNoRegle,
.totalSelectVers, .CotisFact, .ecartFact {
  width: 40%;
  height: 38px;
}
 
ul {
  display: flex;
}
 
ul li {
  margin: 0;
  list-style: none;
  padding: 2px 5px;
  cursor: pointer;
  border-top: 1px solid black; 
  border-left: 1px solid black;
  border-right: transtarent;
}
 
 
ul li:hover {
  background-color: #2f67ff;
}
 
[data-links=section-5] {
  border-right: 1px solid black;
}
 
section {
  background-color: white;
  margin-top: -17px;
  padding: 10px;
  border: 1px solid black;
}

JS

Code :

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
// récup. des éléments concernés
const btns = document.querySelectorAll("[data-links]");
const sections = document.querySelectorAll(".projet, .infos #infosFact, .infos #infosVers");
 
// événement sur click des boutons
function handleClick(e) {
  const btn = e.target;   // ou this
 
  // récup des id concernées avec test existant
  const datas = btn.dataset.links;
  const links = datas ? datas.split(",") : [];
 
  // masque toutes les sections class="projet" + les fieldset infosFact et infosVers
  sections.forEach((sec) => {
    sec.style.display = "none";
  });
 
  // on affiche les concernées
  links.forEach((id) => {
    const elem = document.getElementById(id.trim());
    if (elem) {
      elem.style.display = "";
    }
  });
}
 
// affectation événement au click
btns.forEach((btn) => {
  btn.addEventListener("click", handleClick);
});
 
// affiche la première section
btns[0].click();

**NoSmoking** · 16/11/2022, 12h02

J'ai bien essayé d'ajouter une classe "actif" à chaque onglet au moment du click, mais je ne parviens à rien. Je ne comprends pas comment faire.

Au clic sur un bouton on enlève la classe active de tous les boutons et on l'ajoute au bouton cliqué, c'est un « presque classique ».

La fonction dans ce cas devient :

Code :

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
// événement sur click des boutons
function handleClick(e) {
  const btn = e.target;   // ou this
  // récup des id concernées avec test existant
  const datas = btn.dataset.links;
  const links = datas ? datas.split(",") : [];
  // masque toutes les sections class="projet"
  sections.forEach((sec) => {
    sec.style.display = "none";
  });
  // on affiche les concernées
  links.forEach((id) => {
    const elem = document.getElementById(id.trim());
    if (elem) {
      elem.style.display = "";
    }
  });
  // ajoute/supprime class sur les boutons
  btns.forEach((elem) => {
    // version courte
    // elem.classList[elem == btn ? "add" : "remove"]("btn-actif");
 
    // version lisible
    elem.classList.remove("btn-actif");
    if (elem === btn) {
      elem.classList.add("btn-actif");
    }
  });
}

il faut bien sûr qu'il existe dans le CSS la règle .btn-actif comme par exemple :

Code css :

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

1
2
3
4
5
.btn-actif {
  font-style: italic;
  color: #069;
  border: 1px solid currentColor;
}

J'ai mis le lien à jour en tenant compte de ta demande :

↪ Affiche/masque one or more

**prof2zik60** · 17/11/2022, 16h23

Bonjour tout le monde.

Bon et bien après toutes ces péripéties, je suis enfin parvenu au résultat souhaité.

Un grand merci à "NoSmoking" pour son aide. Sans toi, j'aurais mis des siècles pour y arriver.

Merci à tous d'avoir pris le temps de me lire.

Je vais me coller à une compréhension plus poussée de Javascript.

Mon problème est résolu. (jusqu'au suivant !!!

).

Bonne journée à tous.

Michel.
Prof2guitare-classique.

Afficher/Masquer un bloc DIV

JavaScript

Discussions similaires

Partager

Partager