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
| <html>
<head>
<!-- Définir le type de contenu et l'encodage des caractères -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<!-- Lien vers le fichier CSS pour le style -->
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- Inclusion des scripts JavaScript pour les différentes pages -->
<script src="pages/Cards.js"></script>
<script src="pages/Games.js"></script>
<script>
"use strict"; // Mode strict pour une meilleure gestion des erreurs
// Nom du site
const nom_site = "MonSite";
// Variables pour les éléments de titre, menu et contenu
let balise_titre, balise_menu, balise_contenu;
// Exécution du code après le chargement du DOM
document.addEventListener("DOMContentLoaded", () => {
//console.clear();
// Sélection des éléments du DOM
balise_titre = document.querySelector("title");
balise_menu = document.getElementById("menu");
balise_contenu = document.getElementById("contenu");
//Initialisation du menu
let pages = [];
pages.push(new PageCards());
pages.push(new PageGames());
// Mise à jour du nom du site dans l'en-tête
let balise_nom_site = document.querySelector("h1.nom_site");
balise_nom_site.textContent = nom_site;
// Affichage des liens du menu
pages.forEach((page, index_page) => {
// Création d'un lien de menu
let lien_menu = document.createElement("a");
lien_menu.textContent = page.titre(); // Titre de la page
lien_menu.setAttribute("href", ""); // URL vide pour empêcher le comportement par défaut
// Ajout d'un écouteur d'événements pour le clic sur le lien
lien_menu.addEventListener("click", e => {
e.preventDefault(); // Empêcher le comportement par défaut du lien
afficher_page(page); // Afficher la page correspondante
});
// Ajout du lien dans un conteneur de liste
let conteneur_lien_menu = document.createElement("li");
conteneur_lien_menu.append(lien_menu);
balise_menu.append(conteneur_lien_menu); // Ajout du conteneur au menu
});
// Affichage de la première page par défaut
afficher_page(pages[0]);
});
// Fonction pour afficher une page
function afficher_page(page)
{
// Mise à jour du titre de la page
balise_titre.textContent = page.titre() + " | " + nom_site;
// Mise à jour du contenu de la page
balise_contenu.innerHTML = page.contenu();
}
</script>
<!-- Structure HTML de la page -->
<div class="entete">
<h1 class="nom_site"></h1>
<ul id="menu"></ul>
</div>
<div id="contenu"></div>
</body>
</html> |
Navigation dans le body. [WebApp]
Répondre avec citation
Envoyé par valery.petit
.
Partager