Créer des boutons de contrôle pour changer de Tab

Tutoriel
September 16, 2022
3 min
Webflow Tuto
Points clés de l'article

Aujourd'hui, nous allons voir comment ajouter des boutons de contrôle pour passer d'un tab à un autre grâce à un peu de code.

Le but va être de créer un bouton qui passera au premier Tab à la gauche du Tab actif et un autre au premier Tab à la droite du Tab actif.

Étape 1 : Définir un tab actif par défaut

Après avoir créé votre Tab, la première manipulation à faire et de vous assurer que vous avez bien un Tab actif par défaut. Il est nécessaire que quand votre page charge, un tab soit actif.

Pour cela, vous pouvez vous rendre dans les paramètres de votre Tab et choisir le tab actif par défaut dans "Set Active Tab"

Set active tab webflow

Étape 2 : Créer 2 boutons

Maintenant, nous pouvons commencer à créer 2 boutons dans notre projet. Vous pouvez insérer des boutons, link block ou même un Div block si vous le souhaitez. Nous vous recommandons par contre d'ajouter un attribut personnalisé de type aria-label décrivant le but des boutons.

Vous pouvez personnaliser les boutons comme bon vous semble

Boutons de contrôle tab

Étape 3 : Donner des classes aux boutons

Une fois vos boutons créés, vous allez devoir leur donner une classe. Chaque bouton doit avoir une classe spécifique. Pour cela, vous pouvez ajouter une combo class.

Étape 4 : Ajouter du code jQuery

On rentre maintenant dans la partie un peu plus technique. Nous allons insérer le code suivant dans les paramètres de notre page, dans le champ Before Body Tag :

<script>
$('.classe-bouton-suivant').on('click', function() {
  $('.w-tab-link.w--current').nextAll('.w-tab-link:first').click();
});

$('.classe-bouton-precedent').on('click', function() {
  $('.w-tab-link.w--current').prevAll('.w-tab-link:first').click();
});
</script>

Il faut maintenant venir modifier un peu ce code.

A la place de classe-bouton-suivant, vous allez venir mettre le nom de la classe du bouton qui permettra de passer au Tab suivant. Si vous avez utilisé une combo class, il faudra modifier .classe-bouton-suivant par .class.combo-class où class est la première classe de votre classe combinée et où combo-class est votre classe combinée.

A la place de classe-bouton-precedent, vous allez venir mettre le nom de la classe du bouton qui permettra de passer au Tab précédent. Si vous avez utilisé une combo class, il faudra modifier .classe-bouton-precedent par .class.combo-class où class est la première classe de votre classe combinée et où combo-class est votre classe combinée.

Si vous utilisez plusieurs Tab dans votre page, il faudra avant les 4 .w-tab-link ajouter la classe que vous avez donnée à vos Tab link. Par exemple .home-header_tab-link.w-tab-link

code boutons pour changer de tab

Étape 5 : Publier le projet Webflow

Le code ne fonctionne que lorsque le projet est en ligne. Il faudra donc publier votre projet pour tester cette fonctionnalité pour changer de Tab grâce à des boutons !

bouton changer de tab webflow

Si vous le souhaitez, vous pouvez également découvrir notre tutoriel pour créer des boutons qui permettent de scroll horizontalement.

{{custom-blog-cta}}

Formation Webflow Gratuite
Commencer la formation
Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter