Verlinkung auf einzelne Tabs

Thema wurde von Christian Koch, 24. April 2014 erstellt.

  1. Christian Koch

    Christian Koch Erfahrener Benutzer

    Registriert seit:
    20. Juli 2011
    Beiträge:
    71
    Danke erhalten:
    1
    Danke vergeben:
    25
    Hallo,

    in der Artikelbeschreibung kann man ja verschiedene Tabs nutzen. Ich möchte aus einem Tab in den anderen Tab switchen, also soll in dem ersten Tab etwas stehen wie "weiteres hier" und das soll dann als Link wirken, also beim Klick darauf soll der andere Tab aktiviert werden.

    Hintergrund ist der, dass ich Angst habe, dass einige der Kunden die Tabs übersehen oder das System nicht verstehen. Es gibt beim Klicken auf dem Tab einen Link ala
    http://www.xxx.de/shop/#tab_fragment_1
    aber hier steht ja nicht der Artikel / Kategoriename und ich komme immer auf die Startseite.

    Schon jemand Erfahrungen damit?
     
  2. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Mit einem normalen Link kann man da wohl nichts machen, da der notwendige "anchor" fehlt.

    Ein möglicher Ansatz wäre ein Javascript-Link wie hier:

    PHP:
    <a href="#" onclick="$('a[href=#tab_fragment_1]).click();return false;">Link-Text</a>
     
  3. Christian Koch

    Christian Koch Erfahrener Benutzer

    Registriert seit:
    20. Juli 2011
    Beiträge:
    71
    Danke erhalten:
    1
    Danke vergeben:
    25
    #3 Christian Koch, 24. April 2014
    Zuletzt bearbeitet: 17. Juni 2014
    Hi Avenger,


    habe es gerade ausprobiert und im Editor im "Quellcode" Modus eingefügt
    PHP:
    Eine genaue Beschreibung entnehmen Sie bitte dem Tab <a onclick="$('a[href=#tab_fragment_1]).click();return false;" href="#">Produkttext</a> .<br />
    Man kommt leider immernoch auf die Startseite oder der Link wurde nicht richtig übernommen, habe Cache aber geleert.


    Fragliche Produktseite:


    Edit: Sehe gerade, der Editor wurschtelt das immer um...
    Edit 2: Habe es gerade mit "Anchor" probiert, der Anker muss aber anscheinend immer auf dem fraglichen Tab sein :/
     
  4. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Da fehlte ein Apostroph (')....

    Damit funktioniert das jetzt:

    PHP:
    <class="cross_tab_link" onclick="$('a[href=#tab_fragment_1]').click();return false;" href="#">Produkttext</a>
    Diese Javascript-basierte Lösung hat auch den großen Vorteil, dass man da nicht erst zum Server gehen muss.

    Außerdem würde das mit dem "anchor" in der URL sowieso nicht funktionieren, da beim Laden (per Javascript) immer der erste TAB aktiviert wird.

    Den Link sollte man aber besser hervorheben.....

    Deshalb habe ich noch die CSS-Klasse "cross_tab_link" in den Link eingebaut.
     
  5. Christian Koch

    Christian Koch Erfahrener Benutzer

    Registriert seit:
    20. Juli 2011
    Beiträge:
    71
    Danke erhalten:
    1
    Danke vergeben:
    25
    Wow, funktioniert super und schnell. Danke dir vielmals :)
     
  6. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Dafür hat der Foren-Gott den "DANKE"-Button erfunden....
     
  7. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    ich finde das auch gut uns versuche es einzubauen, funzt aber überhaupt nicht.
    Es wird immer nur nach "#" verlinkt, sprich es tut sich nix.....

    Code sieht danach so aus im HTML:

    HTML:
    Eine genaue Beschreibung entnehmen Sie bitte dem Tab <a href="#" onclick="$('a[href=#tab_fragment_1]').click();return false;">Produkttext</a>
     
  8. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Haste mal nen Link?
     
  9. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    (Link nur für registrierte Nutzer sichtbar.)
     
  10. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Ich habe die TABs etwas anders konstruiert als Gambio-EyeCandy, daher funktioniert der verwendete CSS-Selector für den TAB in jQuery hier nicht.

    Damit funktioniert das:

    PHP:
    <class="cross_tab_link" onclick="var tab=$('li#tab_1');tab.click();tab[0].scrollIntoView();return false;" href="#">Eco Wave</a>
    Das

    PHP:
    tab[0].scrollIntoView();
    habe ich noch hinzugefügt, damit der Besucher gleich den TAB sieht, ohne scrollen zu müssen....

    Andernfalls bleibt der Browser so stehen, wo er gerade steht.....
     
  11. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    werde ich gleich heute testen, danke.
     
  12. Christian Koch

    Christian Koch Erfahrener Benutzer

    Registriert seit:
    20. Juli 2011
    Beiträge:
    71
    Danke erhalten:
    1
    Danke vergeben:
    25
    Hallo Avenger,

    in der neuen Shopversion scheint das nicht mehr zu funktionieren, oder? Siehe http://www.scheerkoch.de/shop/Gebrauchtmaschinen/Winkelanlage-WA-5011.html
     
  13. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
  14. Christian Koch

    Christian Koch Erfahrener Benutzer

    Registriert seit:
    20. Juli 2011
    Beiträge:
    71
    Danke erhalten:
    1
    Danke vergeben:
    25
    #14 Christian Koch, 24. Oktober 2017
    Zuletzt bearbeitet: 8. Juli 2022
    Hallo,

    unter GX3 scheint das auch wieder raus zu sein - Avenger ist ja schon länger nicht mehr hier gewesen, vielleicht kann mir da jemand anderes weiterhelfen?
     
  15. MosTec

    MosTec Erfahrener Benutzer

    Registriert seit:
    10. Februar 2014
    Beiträge:
    182
    Danke erhalten:
    15
    Danke vergeben:
    23
    Würde das hier gern noch mal anstoßen. :)

    Hat hier evtl. jemand eine Lösung für?
     
  16. MosTec

    MosTec Erfahrener Benutzer

    Registriert seit:
    10. Februar 2014
    Beiträge:
    182
    Danke erhalten:
    15
    Danke vergeben:
    23
    Nutzt das noch jemand von denen die es eingebaut hatten?

    Geht das auch in Malibu zu übernehmen?
     
  17. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    937
    Danke erhalten:
    808
    Danke vergeben:
    301
    Code:
    onclick="document.querySelector('.nav-tabs li:nth-child(2) a').click();return false;"
    wechselt bei @Christian Koch 's Artikel auf den Produkttext-Reiter.

    Ja, das funktioniert auch in Malibu. Die "2" steht für das zweite Tab.
     
  18. MosTec

    MosTec Erfahrener Benutzer

    Registriert seit:
    10. Februar 2014
    Beiträge:
    182
    Danke erhalten:
    15
    Danke vergeben:
    23
    Supi
    das klappt dann jetzt wunderbar! :D
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. November 2019
    Beiträge:
    130
    Danke erhalten:
    25
    Danke vergeben:
    68
    Hi Dominik,

    wie müsste dieser onclick erweitert werden, damit dann auch wieder nach oben zum Start der Tabs gescrollt wird?
    Aktuell habe ich z.B. den Link unterhalb einer Produktbeschreibung eingebaut und sobald ich nun drauf drücke, lande ich im nächsten Tag irgendwo in der Mitte statt am Anfang.

    Ansonsten funktioniert diese Lösung tadellos mit dem Malibu Theme.

    Grüße
     
  20. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    937
    Danke erhalten:
    808
    Danke vergeben:
    301
    Hi :)

    Code:
    onclick="document.querySelector('.nav-tabs li:nth-child(2) a').click();document.querySelector('.nav-tabs').scrollIntoView();return false;"