recherche

Maison >interface Web >tutoriel HTML >Comment implémenter une disposition d'onglets latéraux fixe en utilisant HTML et CSS

Comment implémenter une disposition d'onglets latéraux fixe en utilisant HTML et CSS

WBOY
WBOYoriginal
2023-10-24 09:58:511167parcourir

Comment implémenter une disposition donglets latéraux fixe en utilisant HTML et CSS

Comment utiliser HTML et CSS pour implémenter une disposition d'onglets latéraux fixe

Dans la conception et le développement de sites Web, il est souvent nécessaire d'implémenter une disposition d'onglets latéraux fixe pour afficher différents contenus ou naviguer dans différentes pages. Cet article explique comment utiliser HTML et CSS pour obtenir une telle mise en page et fournit des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons définir la structure HTML pour organiser la disposition de nos onglets. Il y aura généralement une barre latérale et une zone de contenu principale. La barre latérale est utilisée pour placer les boutons d'onglet et la zone de contenu principale est utilisée pour afficher le contenu correspondant à l'onglet.

Voici un exemple de structure HTML de base : 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="sidebar">
    <button class="tab-button" onclick="openTab(event, 'tab1')">选项卡1</button>
    <button class="tab-button" onclick="openTab(event, 'tab2')">选项卡2</button>
    <button class="tab-button" onclick="openTab(event, 'tab3')">选项卡3</button>
  </div>
  <div class="content">
    <div id="tab1" class="tab-content">
      <h2>选项卡 1 内容</h2>
      <p>这是选项卡1的内容。</p>
    </div>
    <div id="tab2" class="tab-content">
      <h2>选项卡 2 内容</h2>
      <p>这是选项卡2的内容。</p>
    </div>
    <div id="tab3" class="tab-content">
      <h2>选项卡 3 内容</h2>
      <p>这是选项卡3的内容。</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Dans le code ci-dessus, nous utilisons un élément div comme barre latérale et plaçons plusieurs boutons sous forme d'onglets à l'intérieur. La zone de contenu principale utilise plusieurs éléments div et gère le contenu de différents onglets en définissant un identifiant unique pour chaque élément div.

2. Styles CSS

Ensuite, vous devez utiliser des styles CSS pour définir le style et le comportement de la disposition des onglets.

Tout d'abord, ajoutez des styles à la barre latérale et aux boutons d'onglet : 

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
  padding: 20px;
}

.tab-button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  background-color: #ddd;
  text-align: left;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #bbb;
}

.tab-button.active {
  background-color: #ccc;
}

Le code de style ci-dessus définit la largeur, la couleur d'arrière-plan, le remplissage et les autres styles de la barre latérale, ainsi que la largeur, le remplissage, la bordure du bouton d'onglet, etc. . Dans le même temps, le style de survol et le style actif du bouton d'onglet sont également définis.

Ensuite, définissez le style du contenu de l'onglet : 

.content {
  margin-left: 200px; /* 与侧边栏宽度一致 */
  padding: 20px;
}

.tab-content {
  display: none; /* 默认隐藏所有选项卡内容 */
}

.tab-content.active {
  display: block; /* 显示选中的选项卡内容 */
}

Le code de style ci-dessus utilise l'attribut margin-left pour aligner la zone de contenu principale avec la barre latérale, et utilise l'attribut display pour contrôler l'affichage et le masquage du contenu de l'onglet. . Par défaut, tout le contenu de l'onglet est masqué et seul le contenu de l'onglet sélectionné est affiché.

3. Comportement JavaScript

Afin que la disposition des onglets fonctionne correctement, nous avons également besoin de code JavaScript pour gérer l'événement de clic du bouton d'onglet et afficher le contenu de l'onglet correspondant en fonction du bouton d'onglet cliqué.

Voici un exemple de code JavaScript de base : 

function openTab(event, tabName) {
  var i, tabContent, tabButton;

  // 隐藏所有选项卡内容
  tabContent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }

  // 移除所有选项卡按钮的 active 样式
  tabButton = document.getElementsByClassName("tab-button");
  for (i = 0; i < tabButton.length; i++) {
    tabButton[i].className = tabButton[i].className.replace(" active", "");
  }

  // 显示选中的选项卡内容和添加 active 样式
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

Le code JavaScript ci-dessus utilise la fonction openTab pour gérer l'événement de clic du bouton d'onglet. Cette fonction masque d'abord tout le contenu de l'onglet, puis supprime le style actif de tous les boutons d'onglet, et enfin affiche le contenu de l'onglet sélectionné et ajoute le style actif.

Enfin, vous devez enregistrer le code de style CSS et le code JavaScript ci-dessus respectivement sous les fichiers style.css et script.js, et les introduire dans le fichier HTML.

4. Résumé

Avec la structure HTML, le style CSS et le code JavaScript ci-dessus, nous pouvons implémenter une disposition de base d'onglets latéraux fixes. Lorsque l'utilisateur clique sur différents boutons d'onglet, le contenu de l'onglet correspondant sera affiché et le bouton d'onglet aura un style correspondant pour indiquer l'état sélectionné.

Bien sûr, l'exemple ci-dessus n'est qu'une implémentation de base, et vous pouvez personnaliser et optimiser davantage la mise en page et le style en fonction des besoins réels. J'espère que cet article vous a été utile pour implémenter une disposition d'onglets latéraux fixe en utilisant HTML et CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html JS 事件 样式表 内边距 display margin
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter la disposition du flux en cascade à l'aide de HTML et CSSArticle suivant：Comment implémenter la disposition du flux en cascade à l'aide de HTML et CSS

Articles Liés

Voir plus