Comment créer : Page d'étiquette complète

Apprenez à utiliser CSS et JavaScript pour créer une page d'étiquette complète couvrant toute la fenêtre du navigateur (page d'étiquette à écran complet).

Créer une page d'étiquette unique

Étape 1 - Ajouter HTML :

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">À propos</button>
<div id="Home" class="tabcontent">
  <h3Maison</h3>
  <p>La maison est là où bat le cœur...</p>
</div>
<div id="News" class="tabcontent">
  <h3Nouvelles</h3>
  <p>Des nouvelles ce beau jour!</p>
</div>
<div id="Contact" class="tabcontent">
  <h3Contact</h3>
  <p>Prenez contact, ou passez nous voir pour un café.</p>
</div>
<div id="About" class="tabcontent">
  <h3À propos</h3>
  <p>Qui nous sommes et ce que nous faisons.</p>
</div>

Créer des boutons pour ouvrir le contenu spécifique des onglets. Tous les éléments avec class="tabcontent" de <div> Les éléments sont tous cachés par défaut (par CSS et JS). Lorsque l'utilisateur clique sur un bouton, il ouvre le contenu de l'onglet "correspondant" à ce bouton.

Étape 2 - Ajouter CSS :

Définir le style des liens et du contenu des onglets (page complète) :

/* Définir la hauteur de body et de document à 100%, pour activer les "onglets page complète" */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}
/* Définir le style des liens de l'onglet */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}
.tablink:hover {
  background-color: #777;
}
/* Définir le style du contenu de l'onglet (et ajouter une hauteur de 100% à tout le contenu de la page) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

Étape 3 - Ajouter JavaScript :

function openPage(pageName, elmnt, color) {
  // Masquer par défaut tous les éléments avec la classe="tabcontent"
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Supprimer la couleur de fond de tous les liens/boutons d'onglet
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  // Afficher le contenu spécifique de l'onglet
  document.getElementById(pageName).style.display = "block";
  // Ajouter une couleur spécifique au bouton utilisé pour ouvrir le contenu de l'onglet
  elmnt.style.backgroundColor = color;
}
// Obtenir l'élément avec l'id="defaultOpen" et cliquer dessus
document.getElementById("defaultOpen").click();

Essayer personnellement

Pages connexes

Tutoriel :Comment créer un onglet