Hallo Auge, etwas überarbeitet: ~~~ js $(document).ready(function() { var targetlist = '<nav><ul class="tabswitcher"></ul></nav>', targets = ''; $('.cf-tab-content').prepend(targetlist); $('.cf-tab-pane').each(function(){ targets += '<li><a href="#' + this.id + '">' + $(this).children('legend').text() + '</a></li>'; }); $('.tabswitcher').append(targets); $("body").addClass("tabs-active"); var hash = document.location.hash; if(!hash) { var first = $(".tabswitcher li a:first"); hash = first.attr("href"); history.pushState({}, first.text(), hash); } $(hash).addClass('active'); $('.tabswitcher a[href="' + hash + '"]').parent().addClass("active"); $('.tabswitcher li a').on('click', function(ev) { ev.preventDefault(); $(".cf-tab-pane.active").removeClass("active"); $(".tabswitcher .active").removeClass("active"); var anchor = $(this).attr("href"); $(anchor).addClass("active"); $(this).parent().addClass("active"); history.pushState({}, $(this).text(), anchor); }); $(window).on('popstate', function() { var anchor = document.location.hash || $(".tabswitcher li a:first").attr("href"); $(".cf-tab-pane.active").removeClass("active"); $(".tabswitcher .active").removeClass("active"); $(anchor).addClass("active"); $('.tabswitcher a[href="' + anchor + '"]').parent().addClass("active"); }); }); ~~~ ~~~ scss .tabs-active { .tabswitcher { border-bottom: 2px solid #C4D4DA; li { margin-right: 0.3em; border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; } li.active { background-color:#F1F3F4; } } .cf-tab-pane:not(.active) { display:none; } } ~~~ Sieht dann so aus:  LG, CK -- <https://wwwtech.de/about>

Hallo Auge, etwas überarbeitet: ~~~ js $(document).ready(function() { var targetlist = '<nav><ul class="tabswitcher"></ul></nav>', targets = ''; $('.cf-tab-content').prepend(targetlist); $('.cf-tab-pane').each(function(){ targets += '<li><a href="#' + this.id + '">' + $(this).children('legend').text() + '</a></li>'; }); $('.tabswitcher').append(targets); $("body").addClass("tabs-active"); var hash = document.location.hash; if(!hash) { var first = $(".tabswitcher li a:first"); hash = first.attr("href"); history.pushState({}, first.text(), hash); } $(hash).addClass('active'); $('.tabswitcher a[href="' + hash + '"]').parent().addClass("active"); $('.tabswitcher li a').on('click', function(ev) { ev.preventDefault(); $(".cf-tab-pane.active").removeClass("active"); $(".tabswitcher .active").removeClass("active"); var anchor = $(this).attr("href"); $(anchor).addClass("active"); $(this).parent().addClass("active"); history.pushState({}, $(this).text(), anchor); }); $(window).on('popstate', function() { var anchor = document.location.hash || $(".tabswitcher li a:first").attr("href"); $(".cf-tab-pane.active").removeClass("active"); $(".tabswitcher .active").removeClass("active"); $(anchor).addClass("active"); $('.tabswitcher a[href="' + hash + '"]').parent().addClass("active"); }); }); ~~~ ~~~ scss .tabs-active { .tabswitcher { border-bottom: 2px solid #C4D4DA; li { margin-right: 0.3em; border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; } li.active { background-color:#F1F3F4; } } .cf-tab-pane:not(.active) { display:none; } } ~~~ Sieht dann so aus:  LG, CK -- <https://wwwtech.de/about>