Créer un lien vers un Tab spécifique dans Webflow

Tutoriel
July 20, 2022
3 min
Webflow avec icône link
Points clés de l'article

Dans Webflow, il est possible d'insérer des liens ou boutons avec plusieurs options de renvoi. Vous pouvez renvoyer votre lien vers un lien externe, une page de votre site, un numéro de téléphone, un email, une section ou même insérer un lien pour télécharger un fichier.

Ces différentes options sont très pratiques, mais pour faire des renvois plus spécifiques, il faut réaliser quelques manipulations supplémentaires. Nous avons par exemple écrit un article pour renvoyer un lien vers une section d'une autre page de votre site web. Dans notre tutoriel du jour, nous allons nous intéresser à la façon d'ajouter un lien qui renvoie vers un Tab spécifique de votre projet.

Étape 1 : Insérez un Tab dans son projet

Si cela n'est pas déjà fait, vous pouvez ajouter un Tab dans l'une des pages de votre projet et le styliser comme vous le souhaitez. Nous vous conseillons également de renommer les différents Tabs.

élément tab dans webflow

Étape 2 : Attribuez un ID à vos Tabs Link

Ensuite, il faudra sélectionner chacun de vos Tab link et leur donner un ID spécifique et unique. Nous vous conseillons de donner le même nom que celui du Tab.

Donner un id à un tab link webflow

Étape 3 : Insérez du code

Dans cette étape, il vous suffira seulement de copier-coller le code suivant dans les paramètres de la page qui contient le tabs. Il faudra l'insérer dans la partie "Before <!-- fs-richtext-ignore --></body> tag".

<script>
window.onload = function () {		
  const urlParams = new URLSearchParams(window.location.search);		
  const tab = urlParams.get('tab');		
  if (tab) {
    const tabButton = document.getElementById(tab)
    tabButton.click();		
  }
}
</script>
ajout code personnalisé pour lien vers tab spécifique webflow

Étape 4 : Ajoutez une URL à votre bouton ou lien

La dernière étape avant de publier votre site va consister à vous rendre dans les paramètres de votre lien. Vous allez devoir sélectionner l'option "External URL" puis personnaliser l'URL suivante en fonction de votre projet :

/slug-page-contenant-le-tab?tab=tab-id

Dans notre exemple, notre Tab se situe dans la page contact (avec comme slug : contact) et l'id du tab vers lequel on souhaite rediriger est restaurant. Ainsi, nous ajoutons dans "External URL", l'URL suivante : /contact?tab=restaurant

ajout du lien vers un tab spécifique webflow

Voilà, vous pouvez maintenant renvoyer vos liens vers le tab que vous souhaitez ! Pour ne rien manquer de nos dernier articles, vous pouvez vous abonner à notre newsletter nocode !

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