Comment ouvrir l'onglet de catégorie CSS

Les onglets de catégorie CSS peuvent afficher le contenu de la catégorie, ce qui peut être réalisé en suivant les étapes suivantes : Créez un conteneur HTML contenant des boutons d'onglet et du contenu, et définissez son attribut ID, définissez le style CSS de l'onglet et du contenu pour utiliser JavaScript ; écouter les clics sur le bouton d'onglet Événement qui masque tout le contenu de l'onglet et affiche le contenu de l'onglet correspondant au bouton cliqué.

Comment ouvrir les onglets de catégorie CSS

Les onglets de catégorie CSS sont un moyen d'organiser et d'afficher le contenu, qui permet aux utilisateurs de basculer entre différentes catégories de contenu en cliquant sur les onglets. Pour ouvrir les onglets de catégorie CSS, vous devez suivre ces étapes :

Structure HTML

1. Créez un élément conteneur en HTML qui contient la barre d'onglets et le contenu de l'onglet.
2. Créez un élément <button> ou <a> pour chaque onglet et définissez son attribut id. <button> 或 <a> 元素，并设置其 id 属性。
3. 为每个选项卡内容创建一个 <div> 元素，并设置其 id
Créez un élément <div> pour chaque contenu d'onglet et définissez son attribut id.

Voici un exemple de structure HTML :

<code class="html"><div class="tabs">
  <button id="tab1">选项卡 1</button>
  <button id="tab2">选项卡 2</button>

  <div id="content1">内容 1</div>
  <div id="content2">内容 2</div>
</div></code>

Styles CSS

1. Définissez le style de la barre d'onglets, y compris la couleur d'arrière-plan, la taille de la police et l'alignement.
2. Définissez le style du bouton d'onglet, y compris le style des états inactif et actif.
3. Définissez les styles pour le contenu des onglets, y compris la couleur d'arrière-plan, le remplissage et les bordures.

Voici un exemple de style CSS :

<code class="css">.tabs {
  display: flex;
  background-color: #f1f1f1;
  padding: 10px;
}

.tabs button {
  padding: 10px 20px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

.tabs button.active {
  background-color: #f1f1f1;
}

.tabs div {
  display: none;
  padding: 20px;
}

.tabs div.active {
  display: block;
}</code>

Gestion des événements JavaScript

1. Utilisez JavaScript pour écouter les événements de clic sur les boutons d'onglet.
2. Masquer tout le contenu de l'onglet lorsque l'utilisateur clique sur le bouton.
3. Affiche le contenu de l'onglet correspondant au bouton cliqué.

Ce qui suit est un exemple de gestion d'événements JavaScript : 🎜

<code class="javascript">const tabs = document.querySelector('.tabs');

tabs.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const tabId = e.target.id;
    const contentId = tabId.replace('tab', 'content');

    const buttons = tabs.querySelectorAll('button');
    buttons.forEach(btn => btn.classList.remove('active'));

    e.target.classList.add('active');

    const contents = tabs.querySelectorAll('div');
    contents.forEach(content => content.classList.remove('active'));

    const content = tabs.querySelector(`#${contentId}`);
    content.classList.add('active');
  }
});</code>

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!