Si vous souhaitez créer des URL pour diriger vos visiteurs vers un onglet particulier avec les onglets imbriqués d’Elementor, au moment d’écrire ces lignes, cela ne fonctionne pas (23 avril 2024).
Voici comment le faire fonctionner.
Collez ce code dans Elementor dans Code personnalisé.
Ensuite, ajoutez votre identifiant CSS à vos onglets.
Votre URL finale pour arriver sur un onglet sera https://yourwebsite.com/votre-page#onglet
<script>
// Solution simplifiée utilisant les IDs natifs d'Elementor
(function($) {
'use strict';
$(window).on('elementor/frontend/init', function() {
// Fonction pour activer un onglet par son ID
function activateTabById(tabId) {
const $targetTab = $('.e-n-tab-title#' + tabId);
if ($targetTab.length) {
// Vérifier si l'onglet n'est pas déjà actif
if (!$targetTab.attr('aria-selected') || $targetTab.attr('aria-selected') === 'false') {
$targetTab.trigger('click');
}
// Scroll vers l'onglet
setTimeout(function() {
const $container = $targetTab.closest('.elementor-widget-n-tabs');
if ($container.length) {
$('html, body').animate({
scrollTop: $container.offset().top - 100
}, 300);
}
}, 200);
return true;
}
return false;
}
// Activer un onglet depuis l'URL au chargement
function activateFromHash() {
const hash = window.location.hash;
if (hash) {
const tabId = hash.substring(1);
activateTabById(tabId);
}
}
// Mettre à jour l'URL quand on clique sur un onglet
function initTabClicks() {
$('.e-n-tab-title').off('click.taburl').on('click.taburl', function() {
const tabId = $(this).attr('id');
if (tabId && !tabId.startsWith('e-n-tab-title-')) {
// Ne mettre à jour l'URL que si l'ID est personnalisé (pas auto-généré)
history.pushState(null, null, '#' + tabId);
} else if (tabId) {
// Pour les IDs auto-générés, on peut aussi les utiliser
history.pushState(null, null, '#' + tabId);
}
});
}
// Initialiser
setTimeout(function() {
initTabClicks();
activateFromHash();
}, 500);
// Gérer les changements d'URL (bouton retour du navigateur)
$(window).on('hashchange', activateFromHash);
// Réinitialiser quand Elementor recharge des widgets
elementorFrontend.hooks.addAction('frontend/element_ready/n-tabs.default', function($scope) {
setTimeout(function() {
initTabClicks();
}, 100);
});
});
// Fallback si elementor/frontend/init ne se déclenche pas
$(document).ready(function() {
setTimeout(function() {
if ($('.e-n-tab-title').length > 0) {
$(window).trigger('elementor/frontend/init');
}
}, 1500);
});
})(jQuery);
</script>