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.

<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>

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.

<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>

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é.

<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!