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

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

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)

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 

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

‍

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.