Tous nos scripts

Utilities

Tabs Custom

<script>
document.addEventListener('DOMContentLoaded', () => {
  const urlParamName =
    document.querySelector('[js-tabs-url-param]')?.getAttribute('js-tabs-url-param') || 'name';
  const shouldUseUrlParams = document.querySelector('[js-tabs-params="true"]') !== null;
  const urlParams = new URLSearchParams(window.location.search);
  const tabName = urlParams.get(urlParamName);

  if (shouldUseUrlParams && tabName) {
    openTabByName(tabName);
  } else {
    openDefaultTab();
  }
});

document.querySelectorAll('[js-tabs-link]').forEach((tabLink) => {
  tabLink.addEventListener('click', function () {
    let tabNum = this.getAttribute('js-tabs-link');
    let tabName = this.getAttribute('js-tabs-name');
    const urlParamName =
      document.querySelector('[js-tabs-url-param]')?.getAttribute('js-tabs-url-param') || 'name';
    const shouldUseUrlParams = document.querySelector('[js-tabs-params="true"]') !== null;

    resetTabs();

    displayTabContent(tabNum);
    setActiveTab(this);

    if (shouldUseUrlParams) {
      updateURL(tabName, urlParamName);
    }
  });
});

function resetTabs() {
  document.querySelectorAll('[js-tabs-content]').forEach((tabContent) => {
    tabContent.style.display = 'none';
  });

  document.querySelectorAll('[js-tabs-link]').forEach((link) => {
    link.classList.remove('active');
  });
}

function displayTabContent(tabNum) {
  document
    .querySelectorAll(`[js-tabs-content="${tabNum}"], [js-tabs-content^="${tabNum}-"]`)
    .forEach((tabContent) => {
      tabContent.style.display = 'block';
    });
}

function setActiveTab(tabLink) {
  const activeClass =
    document.querySelector('[js-tabs-class]')?.getAttribute('js-tabs-class') || 'active';

  document.querySelectorAll('[js-tabs-link]').forEach((link) => {
    link.classList.remove(activeClass);
  });

  tabLink.classList.add(activeClass);
}

function openTabByName(tabName) {
  let tabLink = document.querySelector(`[js-tabs-link][js-tabs-name="${tabName}"]`);
  if (tabLink) {
    tabLink.click();
  } else {
    openDefaultTab();
  }
}

function openDefaultTab() {
  let defaultTab = document.querySelector('[js-tabs-link][js-tabs-start="true"]');
  if (defaultTab) {
    defaultTab.click();
  }
}

function updateURL(tabName, urlParamName) {
  if (history.pushState) {
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set(urlParamName, tabName);
    window.history.pushState({ path: newUrl.href }, '', newUrl.href);
  }
}
</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Custom Tabs -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/tabs/custom-tabs.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const urlParamName =
    document.querySelector('[js-tabs-url-param]')?.getAttribute('js-tabs-url-param') || 'name';
  const shouldUseUrlParams = document.querySelector('[js-tabs-params="true"]') !== null;
  const urlParams = new URLSearchParams(window.location.search);
  const tabName = urlParams.get(urlParamName);

  if (shouldUseUrlParams && tabName) {
    openTabByName(tabName);
  } else {
    openDefaultTab();
  }
});

document.querySelectorAll('[js-tabs-link]').forEach((tabLink) => {
  tabLink.addEventListener('click', function () {
    let tabNum = this.getAttribute('js-tabs-link');
    let tabName = this.getAttribute('js-tabs-name');
    const urlParamName =
      document.querySelector('[js-tabs-url-param]')?.getAttribute('js-tabs-url-param') || 'name';
    const shouldUseUrlParams = document.querySelector('[js-tabs-params="true"]') !== null;

    resetTabs();

    displayTabContent(tabNum);
    setActiveTab(this);

    if (shouldUseUrlParams) {
      updateURL(tabName, urlParamName);
    }
  });
});

function resetTabs() {
  document.querySelectorAll('[js-tabs-content]').forEach((tabContent) => {
    tabContent.style.display = 'none';
  });

  document.querySelectorAll('[js-tabs-link]').forEach((link) => {
    link.classList.remove('active');
  });
}

function displayTabContent(tabNum) {
  document
    .querySelectorAll(`[js-tabs-content="${tabNum}"], [js-tabs-content^="${tabNum}-"]`)
    .forEach((tabContent) => {
      tabContent.style.display = 'block';
    });
}

function setActiveTab(tabLink) {
  const activeClass =
    document.querySelector('[js-tabs-class]')?.getAttribute('js-tabs-class') || 'active';

  document.querySelectorAll('[js-tabs-link]').forEach((link) => {
    link.classList.remove(activeClass);
  });

  tabLink.classList.add(activeClass);
}

function openTabByName(tabName) {
  let tabLink = document.querySelector(`[js-tabs-link][js-tabs-name="${tabName}"]`);
  if (tabLink) {
    tabLink.click();
  } else {
    openDefaultTab();
  }
}

function openDefaultTab() {
  let defaultTab = document.querySelector('[js-tabs-link][js-tabs-start="true"]');
  if (defaultTab) {
    defaultTab.click();
  }
}

function updateURL(tabName, urlParamName) {
  if (history.pushState) {
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set(urlParamName, tabName);
    window.history.pushState({ path: newUrl.href }, '', newUrl.href);
  }
}
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Div - Identifier Tabs Links

‍

Nom

js-tabs-link

Valeur

[numero]

Identifier les éléments qui permettront de cliquer pour afficher les tabs contents correspondantes

Div - Définir les Tabs Contents

Nom

js-tabs-content

Copié !

Valeur

[numero]

Copié !

Identifier les éléments qui permettront d'afficher les tabs contents en fonction du tabs links

Div - Définir une Tab active / ouverte par défaut

Mettre l'attribute sur le Tab Link

Nom

js-tabs-start

Valeur

true

Définir quelle tab doit être active / ouverte par défaut

Div - Définir une class pour l'état actif - OPTIONNEL

Nom

js-tabs-class

Valeur

[identifier]

Définir la class qui doit ajoutée au Tab Link lorsqu'une tab est active

Mettre l'attribute sur le premier Tab Link

Div - Définir un nom pour chaque Tab - OPTIONNEL

Nom

js-tabs-name

Valeur

[identifier]

Donner un nom à chaque tab. Ce nom correspondra à la valeur du paramètre d'URL (si l'option est activée)

Mettre l'attribute sur chaque Tab Link

Div - Définir si les tabs entrainent un changement de paramètre d'URL - OPTIONNEL

Nom

js-tabs-params

Valeur

true

Définir si les changements de tabs entraînent un changement de paramètre d'URL.

Cela permet également d'ouvrir une tab spécifique avec un lien contenant un paramètre d'URL 

Mettre l'attribute sur le parent des Tab Link

Div - Définir le nom du paramètre d'URL - OPTIONNEL

Nom

js-tabs-url-param

Valeur

[identifier]

Définir le nom du paramètre d'URL

Mettre l'attribute sur le parent des Tab Link

‍

Exemple :

Si l'identifier est type alors l'URL sera monsite.com?type

Tuto, template & scripts

Tuto

Template

Script

<script>
document.addEventListener('DOMContentLoaded', () => {
  const urlParamName =
    document.querySelector('[js-tabs-url-param]')?.getAttribute('js-tabs-url-param') || 'name';
  const shouldUseUrlParams = document.querySelector('[js-tabs-params="true"]') !== null;
  const urlParams = new URLSearchParams(window.location.search);
  const tabName = urlParams.get(urlParamName);

  if (shouldUseUrlParams && tabName) {
    openTabByName(tabName);
  } else {
    openDefaultTab();
  }
});

document.querySelectorAll('[js-tabs-link]').forEach((tabLink) => {
  tabLink.addEventListener('click', function () {
    let tabNum = this.getAttribute('js-tabs-link');
    let tabName = this.getAttribute('js-tabs-name');
    const urlParamName =
      document.querySelector('[js-tabs-url-param]')?.getAttribute('js-tabs-url-param') || 'name';
    const shouldUseUrlParams = document.querySelector('[js-tabs-params="true"]') !== null;

    resetTabs();

    displayTabContent(tabNum);
    setActiveTab(this);

    if (shouldUseUrlParams) {
      updateURL(tabName, urlParamName);
    }
  });
});

function resetTabs() {
  document.querySelectorAll('[js-tabs-content]').forEach((tabContent) => {
    tabContent.style.display = 'none';
  });

  document.querySelectorAll('[js-tabs-link]').forEach((link) => {
    link.classList.remove('active');
  });
}

function displayTabContent(tabNum) {
  document
    .querySelectorAll(`[js-tabs-content="${tabNum}"], [js-tabs-content^="${tabNum}-"]`)
    .forEach((tabContent) => {
      tabContent.style.display = 'block';
    });
}

function setActiveTab(tabLink) {
  const activeClass =
    document.querySelector('[js-tabs-class]')?.getAttribute('js-tabs-class') || 'active';

  document.querySelectorAll('[js-tabs-link]').forEach((link) => {
    link.classList.remove(activeClass);
  });

  tabLink.classList.add(activeClass);
}

function openTabByName(tabName) {
  let tabLink = document.querySelector(`[js-tabs-link][js-tabs-name="${tabName}"]`);
  if (tabLink) {
    tabLink.click();
  } else {
    openDefaultTab();
  }
}

function openDefaultTab() {
  let defaultTab = document.querySelector('[js-tabs-link][js-tabs-start="true"]');
  if (defaultTab) {
    defaultTab.click();
  }
}

function updateURL(tabName, urlParamName) {
  if (history.pushState) {
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set(urlParamName, tabName);
    window.history.pushState({ path: newUrl.href }, '', newUrl.href);
  }
}
</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.