Organiser des groupes de contenus liés qui se trouvent au même niveau hiérarchique. Ils permettent aux utilisateurs de naviguer dans différentes sections de contenus au sein d’une même page.
Documentation : Figma
Langage: HTML
<nav role="presentation">
<ul class="nav nav-tabs">
<li class="nav-item">
<button id="tab_568991381-1" type="button" class="nav-link active" data-target=#tab_568991381-content-1 aria-current=true>
<span class="nav-link-text">Contenu 1</span>
</button>
</li>
<li class="nav-item">
<button id="tab_568991381-2" type="button" class="nav-link" data-target=#tab_568991381-content-2>
<span class="nav-link-text">Contenu 2</span>
</button>
</li>
<li class="nav-item">
<button id="tab_568991381-3" type="button" class="nav-link" data-ft-tooltip="Infobulle expliquant pourquoi l'élément est désactivé" aria-disabled=true>
<span class="nav-link-text">Contenu 3</span>
</button>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-pane active" id="tab_568991381-content-1">
<h3 class="t3 mt-2 mb-3">Titre de contenu complémentaire</h3>
<p class="mb-0">
Les onglets dont la valeur du paramètre "version" est "boutons" sont prévus pour inclure <span class="emphasis">du contenu secondaire</span>. Sans attributs [role="navigation"] ni [aria-label=""], mais avec la présence sémantique des <ul> <li> ceux-ci sont alors sémantiquement considérés comme une liste de boutons permettant d'afficher du contenu supplémentaire.
</p>
<div class="position-relative">
<a href="#tab_568991381-1" class="skip-link sr-only sr-only-focusable">Retour à l'onglet actif</a>
</div>
</div>
<div class="tab-pane" id="tab_568991381-content-2">
<h1 class="t2 mb-1">Intitulé 2</h1>
<p class="mb-0">Contenu 1 : France Travail est un établissement public à caractère administratif, chargé de l'emploi en France. Créé le 20 décembre 2008, il est issu de la fusion entre l'Agence nationale pour l'emploi et l'Association pour l'emploi dans l'industrie et le commerce.</p>
<div class="position-relative">
<a href="#tab_568991381-2" class="skip-link sr-only sr-only-focusable">Retour à l'onglet actif</a>
</div>
</div>
<div class="tab-pane" id="tab_568991381-content-3">
<h1 class="t2 mb-1">Intitulé 3</h1>
<p class="mb-0">Contenu 1 : France Travail est un établissement public à caractère administratif, chargé de l'emploi en France. Créé le 20 décembre 2008, il est issu de la fusion entre l'Agence nationale pour l'emploi et l'Association pour l'emploi dans l'industrie et le commerce.</p>
<div class="position-relative">
<a href="#tab_568991381-3" class="skip-link sr-only sr-only-focusable">Retour à l'onglet actif</a>
</div>
</div>
</div>
window.addEventListener('DOMContentLoaded', function () {
var tabs = document.querySelectorAll('.nav-link');
tabs.forEach(function (el) {
const tab = el,
target = tab.matches('a') ? 'href' : 'data-target', // On gère <a href="#target"> et <button data-target="#target">
tabSiblings = tab.parentElement.parentElement.querySelectorAll('.nav-link'),
tabPanel = document.querySelector(tab.getAttribute(target));
if (!tabPanel) {
console.warn("[Tab-init.js] Attention, un élément avec la class .nav-link n'a pas de data-target, ni de href exploitable.");
console.warn(tab);
return;
}
const elementsTabPabel = Array.from(tabPanel.children),
firstElementWithContent = elementsTabPabel.find((firstElementWithContent) => firstElementWithContent.textContent),
tabPanelSiblings = tabPanel.parentElement.parentElement.querySelectorAll('.tab-pane');
tab.addEventListener('click', function (event) {
if (!tab.classList.contains('active')) {
tabSiblings.forEach(e => e.classList.remove('active'));
tabSiblings.forEach(e => e.removeAttribute('aria-current'));
tab.classList.add('active');
if (tab.matches('a'))
tab.setAttribute('aria-current', 'page');
else
tab.setAttribute('aria-current', 'true');
tabPanelSiblings.forEach(e => e.classList.remove('active'));
tabPanel.classList.add('active');
}
firstElementWithContent.setAttribute('tabindex', '-1');
firstElementWithContent.focus({ preventScroll: true });
event.preventDefault();
});
});
});
// L'aperçu n'est pas disponible pour les dépendances externes
window.addEventListener('DOMContentLoaded', function () {
var tabs = document.querySelectorAll('.nav-link');
tabs.forEach(function (el) {
const tab = el,
target = tab.matches('a') ? 'href' : 'data-target', // On gère <a href="#target"> et <button data-target="#target">
tabSiblings = tab.parentElement.parentElement.querySelectorAll('.nav-link'),
tabPanel = document.querySelector(tab.getAttribute(target));
if (!tabPanel) {
console.warn("[Tab-init.js] Attention, un élément avec la class .nav-link n'a pas de data-target, ni de href exploitable.");
console.warn(tab);
return;
}
const elementsTabPabel = Array.from(tabPanel.children),
firstElementWithContent = elementsTabPabel.find((firstElementWithContent) => firstElementWithContent.textContent),
tabPanelSiblings = tabPanel.parentElement.parentElement.querySelectorAll('.tab-pane');
tab.addEventListener('click', function (event) {
if (!tab.classList.contains('active')) {
tabSiblings.forEach(e => e.classList.remove('active'));
tabSiblings.forEach(e => e.removeAttribute('aria-current'));
tab.classList.add('active');
if (tab.matches('a'))
tab.setAttribute('aria-current', 'page');
else
tab.setAttribute('aria-current', 'true');
tabPanelSiblings.forEach(e => e.classList.remove('active'));
tabPanel.classList.add('active');
}
firstElementWithContent.setAttribute('tabindex', '-1');
firstElementWithContent.focus({ preventScroll: true });
event.preventDefault();
});
});
});