onglet d'implémentation CSS

CSS implémente le style d'onglet

Le style d'onglet est une conception interactive très courante dans le développement Web. Il affiche plusieurs zones de contenu sous forme d'onglets. L'utilisateur change de zone d'affichage en cliquant sur l'onglet, ce qui améliore considérablement la facilité d'utilisation de. la page Web sur le sexe. Dans cet article, nous allons vous montrer comment implémenter un style de tabulation simple à l'aide de CSS.

Tout d'abord, nous devons définir la structure HTML. La structure spécifique est la suivante :

<div class="tab">
  <div class="tab-header">
    <button class="tab-button active">Tab 1</button>
    <button class="tab-button">Tab 2</button>
    <button class="tab-button">Tab 3</button>
  </div>
  <div class="tab-content active">
    <p>这里是 Tab 1 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 2 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 3 的内容</p>
  </div>
</div>

Dans la structure ci-dessus, nous utilisons l'élément div comme conteneur, qui contient deux sous-éléments, à savoir l'en-tête de l'onglet et l'onglet. contenu. L'en-tête de l'onglet utilise un élément bouton pour représenter chaque onglet, et le contenu de l'onglet est enveloppé à l'aide d'un élément div. Parmi eux, chaque onglet et son contenu sont associés à un nom de classe active, qui est utilisé pour représenter l'onglet actuellement sélectionné. active 类名，用于表示当前选择的选项卡。

接下来，我们开始使用 CSS 来定义样式。首先，我们需要去掉 button 元素的默认样式：

button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

在上述样式中，我们去掉了 button 元素的背景、边框、轮廓和填充，让它看起来像一个纯文本链接。并且设置了鼠标指针的样式为手型，让它看起来更像一个可点击的按钮。

下一步，我们设置 .tab-header 的样式，来实现选项卡的背景色和激活状态：

.tab-header {
  display: flex;
}

.tab-button {
  background-color: #f4f4f4;
}

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

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

在上述样式中，我们使用了 Flexbox 布局来使得选项卡水平排列。然后，我们定义了 .tab-button 的背景色和悬停状态的背景色。最后，我们使用类名 .active 来表示当前激活的选项卡，我们将它的背景色设置为和悬停状态相同，以便在页面加载时直接显示出选项卡的激活状态。

现在，我们只需要为每个选项卡定义一个类名，并将激活状态的类名添加到第一个选项卡中。例如：

<button class="tab-button active tab-1">Tab 1</button>
<button class="tab-button tab-2">Tab 2</button>
<button class="tab-button tab-3">Tab 3</button>

在上述结构中，我们为每个选项卡分别添加了一个类名 tab-1、tab-2、tab-3。这些类名将用于为各自的选项卡定义 CSS 样式。

下一步，我们设置 .tab-content 的样式，来实现选项卡内容的显示和隐藏：

.tab-content:not(.active) {
  display: none;
}

在上述样式中，我们使用了 :not(.active) 选择器来匹配除了激活状态之外的选项卡内容。我们设置它们的 display 属性为 none，以便让它们隐藏在页面上。

最后，我们使用 JavaScript 绑定事件，来实现点击选项卡切换内容的功能：

const tabs = document.querySelectorAll('.tab-button')

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 隐藏所有选项卡内容
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active')
    })
    // 显示当前选项卡内容
    const activeTab = tab.classList[1]
    document.querySelector(`.${activeTab}`).classList.add('active')
    // 切换选项卡的激活状态
    tabs.forEach(tab => {
      tab.classList.remove('active')
    })
    tab.classList.add('active')
  })
})

在上述代码中，我们使用了 querySelectorAll() 方法选择所有选项卡内容元素，并在点击选项卡时循环遍历它们，将它们的 active 类名全部移除。然后，我们使用 classList 属性获取当前选项卡对应的内容元素，并添加 active 类名，以便显示该选项卡内容。最后，我们将所有选项卡的激活状态移除，并为当前选项卡添加 active

Ensuite, nous commençons à utiliser CSS pour définir les styles. Tout d'abord, nous devons supprimer le style par défaut de l'élément bouton :

rrreee

Dans le style ci-dessus, nous supprimons l'arrière-plan, la bordure, le contour et le remplissage de l'élément bouton pour le faire ressembler à un lien en texte brut. Et définissez le style du pointeur de la souris sur une forme de main pour qu'il ressemble davantage à un bouton cliquable.

Étape suivante, nous définissons le style de .tab-header pour obtenir la couleur d'arrière-plan et le statut d'activation de l'onglet : 🎜rrreee🎜Dans le style ci-dessus, nous utilisons la disposition Flexbox pour rendre l'onglet horizontal arrangement. Ensuite, nous définissons la couleur d'arrière-plan de .tab-button et la couleur d'arrière-plan de l'état de survol. Enfin, nous utilisons le nom de classe .active pour représenter l'onglet actuellement actif, et nous définissons sa couleur d'arrière-plan sur la même chose que l'état de survol afin que l'état actif de l'onglet soit directement affiché lorsque la page des charges. 🎜🎜Il ne nous reste plus qu'à définir un nom de classe pour chaque onglet et à ajouter le nom de la classe active au premier onglet. Par exemple : 🎜rrreee🎜Dans la structure ci-dessus, nous avons ajouté un nom de classe pour chaque onglet : tab-1, tab-2, tab-3 code>. Ces noms de classes seront utilisés pour définir les styles CSS pour les onglets respectifs. 🎜🎜Étape suivante, nous définissons le style de <code>.tab-content pour afficher et masquer le contenu de l'onglet : 🎜rrreee🎜Dans le style ci-dessus, nous utilisons :not(.active ) code> sélecteur pour correspondre au contenu de l’onglet sauf l’état actif. Nous définissons leur attribut <code>display sur none afin qu'ils soient masqués sur la page. 🎜🎜Enfin, nous utilisons des événements de liaison JavaScript pour implémenter la fonction de cliquer sur l'onglet pour changer de contenu : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode querySelectorAll() pour sélectionner tous les éléments de contenu de l'onglet, Et parcourez les onglets lorsque vous cliquez dessus, en supprimant tous leurs noms de classe actifs. Ensuite, nous utilisons l'attribut classList pour obtenir l'élément de contenu correspondant à l'onglet actuel, et ajoutons le nom de la classe active pour afficher le contenu de l'onglet. Enfin, nous supprimons l'état d'activation de tous les onglets et ajoutons le nom de la classe active à l'onglet actuel pour le rendre actif. De cette façon, nous avons réussi à implémenter un style de tabulation simple. 🎜🎜Résumé : 🎜🎜Dans cet article, nous avons utilisé CSS et JavaScript pour implémenter un style de tabulation simple. Nous avons d'abord défini la structure HTML, puis utilisé CSS pour définir la couleur d'arrière-plan, l'état de survol et l'état d'activation de l'onglet. Enfin, nous utilisons JavaScript pour implémenter la fonction de changement de contenu en cliquant sur l'onglet. La mise en œuvre de ce style est simple, facile à comprendre et à modifier, et convient à la plupart des projets de développement Web. 🎜

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!