Conseils et méthodes pour obtenir un effet de tabulation coulissante avec CSS

Conseils et méthodes pour obtenir un effet d'onglet coulissant avec CSS

Dans le développement de sites Web, la page à onglet (Tab) est l'un des composants courants, utilisé pour afficher différents contenus ou modules fonctionnels. Afin d'améliorer l'expérience utilisateur, l'effet de languette coulissante est un choix très intéressant. Cet article présentera quelques techniques et méthodes CSS pour obtenir l'effet de tabulation coulissante et fournira des exemples de code spécifiques.

1. Idée de base

L'idée de base pour obtenir l'effet de tabulation coulissante est d'utiliser l'attribut transform de CSS pour contrôler le décalage gauche et droit du conteneur d'onglets et de le combiner avec l'effet de transition pour obtenir un changement d'animation fluide. effet. Dans le même temps, vous devez également utiliser des sélecteurs CSS pour contrôler le style d'étiquette actuellement activé.

2. Structure HTML

Tout d'abord, nous avons besoin d'un conteneur qui contient les boutons d'étiquette et le contenu de l'étiquette. La structure HTML est la suivante :

<div class="tab-container">
  <div class="tabs">
    <button class="tab-item active">标签一</button>
    <button class="tab-item">标签二</button>
    <button class="tab-item">标签三</button>
  </div>
  <div class="tab-content">
    <div class="tab-content-item active">
      <p>标签一的内容</p>
    </div>
    <div class="tab-content-item">
      <p>标签二的内容</p>
    </div>
    <div class="tab-content-item">
      <p>标签三的内容</p>
    </div>
  </div>
</div>

3. Styles CSS

Ensuite, nous devons ajouter quelques styles CSS de base à la structure HTML. Parmi eux, .tab-container est le conteneur complet de la page à onglet, .tabs est le conteneur du bouton d'onglet, .tab-item est le bouton d'onglet, .tab-content est le conteneur de contenu de l'onglet et .tab-content-item est le élément de contenu de l'onglet. Le code est le suivant :

.tab-container {
  position: relative;
}

.tabs {
  display: flex;
}

.tab-item {
  flex: 1;
  padding: 10px;
  background-color: #f0f0f0;
  border: none;
  outline: none;
  cursor: pointer;
}

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

.tab-content {
  width: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
}

.tab-content-item {
  width: 100%;
  flex-shrink: 0;
}

4. Implémentation de l'effet de glissement

Ensuite, nous devons obtenir l'effet de glissement en modifiant le décalage gauche et droit du conteneur d'onglets. Nous pouvons utiliser l'attribut transform de CSS pour y parvenir, et combiné avec l'effet de transition, nous pouvons obtenir une animation de commutation fluide.

.tab-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.tab-content {
  width: 300%; /* 每个标签内容项的宽度百分比为100% */
  display: flex;
  transition: transform 0.3s; /* 过渡效果，动画时间为0.3秒 */
}

.tab-content-item {
  width: 33.33%; /* 三个标签内容项，每个宽度为33.33% */
  flex-shrink: 0;
}

Ensuite, nous devons ajouter un événement de clic au bouton d'étiquette pour changer le contenu de l'étiquette. Le code est le suivant :

let tabItems = document.querySelectorAll('.tab-item');
let tabContentItems = document.querySelectorAll('.tab-content-item');

tabItems.forEach(function(item, index) {
  item.addEventListener('click', function() {
    document.querySelector('.tab-item.active').classList.remove('active');
    document.querySelector('.tab-content-item.active').classList.remove('active');
    
    this.classList.add('active');
    tabContentItems[index].classList.add('active');
    
    let translateX = -index * 33.33; // 计算标签内容容器的左偏移量
    document.querySelector('.tab-content').style.transform = `translateX(${translateX}%)`;
  });
});

De cette façon, nous avons complété le code de base pour obtenir l'effet de tabulation coulissante. Lorsque vous cliquez sur différents boutons d'onglet, le conteneur de contenu de l'onglet obtiendra une animation de commutation fluide en se déplaçant vers la gauche et la droite, et modifiera également le style de l'onglet actuellement actif.

5. Résumé

La technique et la méthode pour obtenir l'effet de tabulation coulissante avec CSS consistent à l'obtenir en modifiant le décalage gauche et droit du conteneur d'onglets et à le combiner avec l'effet de transition pour obtenir un effet de changement d'animation fluide. Dans le même temps, vous devez également utiliser des sélecteurs CSS pour contrôler le style d'étiquette actuellement activé. Grâce aux exemples de code ci-dessus, nous pouvons facilement obtenir l'effet de tabulation coulissante, qui améliore non seulement l'expérience utilisateur, mais augmente également l'interactivité du site Web. Différents sites Web peuvent avoir des besoins et des styles de conception différents, et vous pouvez les modifier et les optimiser en fonction de circonstances spécifiques pour répondre à vos besoins.

J'espère que cet article vous a été utile et vous souhaite plein succès dans la mise en œuvre de l'effet de tabulation coulissante !

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!