Vorbereitung der Tabs #
Wichtig ist zu beachten, dass das Tab Widget von Elementor und nicht von einem ergänzenden Plugin (z.B. Htmega) gewählt wird. Über den gewünschten Tab muss dann ein HTML Widget eingefügt werden mit folgendem Script:
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
let desktoptitles = $('.elementor-tab-desktop-title');
let mobiletitles = $('.elementor-tab-mobile-title');
let strings = [
'?tab1',
'?tab2',
'?tab3'
];
strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
desktoptitles.eq(i).click();
mobiletitles.eq(i).click();
$('html, body').animate({
scrollTop: desktoptitles.eq(i).offset().top - 100
},'slow');
} } );
}); });
</script>
Die Abschnitte „tab1“ „tab2“ „tab3“ können beliebig benannt werden. Es können auch weitere ergänzt werden, je nachdem wie viele Tab-Reiter existieren. (Bitte das Koma hinter den Zeilen nicht vergessen, nur bei der letzten kann man das Komma weglassen)
Verlinkung #
Nachdem das Script eingebunden ist, kann man nun als Link eine Buttons o.Ä., der zu dem bestimmten Tab verlinken soll, ?tab1 hinterlegen.
Beispiele von Verlinkungen: #
Befinden sich die Tabs auf der gleichen Seite reicht:
?tab1
Soll von einer anderen Seite auf einen bestimmten Tab verlinkt werden muss folgendes verwendet werden:
/seitenname/?tab1