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 aria-label="Libellé du groupe de pages" role="navigation">
<ul class="nav nav-tabs">
<li class="nav-item">
<a id="tab_574505767-1" class="nav-link active" href=#tab_574505767-content-1 aria-current=page>
<span aria-hidden="true" class="icon icon-phone"></span><span class="nav-link-text">Page 1</span>
</a>
</li>
<li class="nav-item">
<a id="tab_574505767-2" class="nav-link" href=#tab_574505767-content-2>
<span aria-hidden="true" class="icon icon-customer-support"></span><span class="nav-link-text">Page 2</span>
</a>
</li>
<li class="nav-item">
<a id="tab_574505767-3" class="nav-link" href=#tab_574505767-content-3>
<span aria-hidden="true" class="icon icon-roadsign"></span><span class="nav-link-text">Page 3</span>
</a>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-pane active" id="tab_574505767-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>
<div class="tab-pane" id="tab_574505767-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>
<div class="tab-pane" id="tab_574505767-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>
</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();
});
});
});