Hallo zusammen, ich habe versucht, innerhalb meiner Artikelbeschreibung (Tab 1) einen Link zum Inhalt von Tab 3 zu setzen. Habe nun lange hier im Forum gesucht und auch einiges gefunden und ausprobiert, aber keine der (vermutlich bereits veralteten) Lösungen funktioniert bei mir. Ich habe testweise im HTML an entsprechender Stelle folgenden Code verwendet, den ich in einem Beitrag von 2022 gefunden habe: Code: <a onclick="document.querySelector('.nav-tabs li:nth-child(3) a').click();document.querySelector('.nav-tabs').scrollIntoView();return false;" href="#">Tab 3</a> Das klappt aber leider nicht. Wie wäre denn Stand heute, Ende November 2025, der einfachste Weg, innerhalb der Artikelbeschreibung zu einem Inhalt aus einem anderen Tab zu verlinken? Möglichst "idiotensicher" für mich als absoluten Laien erklärt... Mein Shop ist ein Cloudshop mit Malibu und Gambio 5.0.0.
Das müsste eigentlich immer noch funktionieren. Ich habe es gerade bei mir getestet. Wo und wie hast du den Code eingegeben?
Hallo und danke für eure Rückmeldung. Es funktioniert nun auch bei mir, nachdem ich mir aufgrund eures Feedbacks den Code, den ich hier gepostet habe, selber noch einmal vollständig aus meinem Beitrag oben herauskopiert und ganz neu im HTML eingesetzt habe. Mir war offenbar irgendwann das vordere "a" vor dem onclick verloren gegangen. Ich war nach den vielen frustrierten Fehlversuchen mit veralteten Codes dermaßen betriebsblind, dass ich das schon nicht mehr gemerkt habe. Sorry, dass ich hier grundlos die Pferde scheu gemacht habe und nochmals danke für euren Einsatz!
Eine Frage hätte ich aber doch noch: Wenn ich nun über den Link zum dritten Tab komme, wird sofort der Inhalt, also der Text angezeigt. Die Tabs selber sehe ich nicht mehr, sofern ich nicht wieder nach oben scrolle. Standardmäßig ist es ja so, dass ich in der Artikelansicht alle vorhandenen Tabs sehe und zwischen diesen hin und her klicken kann, wodurch mir als Kunden völlig klar ist, dass ich mich immer auf der gleichen Seite befinde, nur in unterschiedlichen Tabs. Klicke ich jetzt aber in Tab 1 (Beschreibung) auf den Link zu Tab 3 (Weitere Infos) wirkt das im ersten Moment als wäre man in einem neuen Fenster gelandet, da die Zeile mit den Tabs plötzlich nicht mehr sichtbar ist. Gibt es eine Möglichkeit, die Verlinkung so anzulegen, dass man den Inhalt in der Standardansicht inklusive Tableiste (wie im Bild links) sieht, statt dass sofort zum eigentlichen Text (Bild rechts) gesprungen wird?
Das kann ich jetzt bei mir auch nicht nachstellen. Bei mir ist die Tabzeile im Sichtfeld. Aber versuch wie es ist wenn du das Code: .scrollIntoView(); rausnimmst. Eigentlich ist dies da, damit es bis nach oben scrollt. Also der gesamte nav-tabs Bereich sichtbar ist. Aber vielleicht klappt das bei dir irgendwie nicht.
Michaela hat recht, nimms einfach raus: Code: <a href="#" onclick="document.querySelector('.nav-tabs li:nth-child(3) a').click(); return false;>TAB 3</a>
Tatsächlich, Michaela – sobald ich das .scrollintoview() herausnehme, bleibt die Tabzeile sichtbar. ABER... (riesengroßes ABER): NUR wenn der gesamte Text im Tab 1 ("Beschreibung") auch ohne scrollen sichtbar ist. Sobald ich weiter herunterscrollen muss, um zu der Stelle mit dem Link zu gelangen, springt er im verlinkten Tab 3 an die exakt gleiche Stelle, und der obere Teil des Textes fehlt dann natürlich. Da ist die Variante ohne Tabzeile vermutlich doch das kleine Übel und ich lasse es besser so. Myteriös bleibt dennoch, wieso bei dir die Tabzeilen sichtbar bleiben und bei mir immer zum Text unterhalb der Tabzeile gesprungen wird, wenn .scrollintoview() verwendet wird.
Kann es sein, das bei deinem Code irgendwie etwas fehlt? Als ich den testweise verwendet habe, also den von mir und Michaela verwendeten Code im HTML-Bereich der Artikelbeschreibung 1:1 gegen deinen ausgetauscht habe, wurde nach dem Speichern sowohl der Code als auch jeglicher Text der da nach noch gekommen wäre, gelöscht. Habe es mehrmals getestet, es bleibt nur der Text vor deinem Code erhalten. Ergänzung: Hat sich aufgeklärt, das abschließende Apostroph hinter dem return false; hatte im Code gefehlt
Probiere folgenden Code aus und pass die Zahlen für "const mobileOffset = 1200;" und "const desktopOffset = 300;" auf die Höhe die brauchst an. Code: <a href="#" onclick=" const tabs = document.querySelector('.nav-tabs'); // Tab wechseln document.querySelector('.nav-tabs li:nth-child(3) a').click(); // Mobile vs. Desktop erkennen (Breakpoint kannst du anpassen) const isMobile = window.innerWidth <= 768; // Offsets in Pixel anpassen wie du willst const mobileOffset = 1200; // z.B. für Mobile const desktopOffset = 300; // z.B. für Desktop const offset = isMobile ? mobileOffset : desktopOffset; // Scroll-Position berechnen const topPos = tabs.getBoundingClientRect().top + window.scrollY - offset; // Scrollen mit Abstand von oben window.scrollTo({ top: topPos, behavior: 'smooth' }); return false; " > TAB 3</a>
Danke, Svenne, werde es morgen mal testen. Gebe ich den Code auch im HTML-Bereich der Artikelbearbeitung ein?