Innerhalb einer Artikelseite per Link in ein Tab springen

John

Sehr aktives Mitglied
3. März 2012
2.592
496
Berlin
Ich möchte innerhalb einer Artikelseite per Link auf ein Tab springen, es aktiv setzen und den Inhalt anzeigen ganz so, als würde man per Hand dort hinspringen und auf das tab klicken.

Hintergrund: Mein Artikel hat eine Variation "Größe". Ich habe eine Größtentabelle in einem Tab und möchte per Link in diese Tab springen können.

Hat das jemand schonmal gemacht?
 

boaa-group

Sehr aktives Mitglied
28. Dezember 2007
4.932
8
Thailand, Bangkok
AW: Innerhalb einer Artikelseite per Link in ein Tab springen

HTML:
<a href="#box_votes" onClick="$('ul.semtabs li.ratings').trigger('click');">Testlink</a>
#box_votes wäre in dem Fall die "id" des Bewertungstabs.
ul.semtabs li.ratings wäre der Tab "Bewertungen" den du anklickst um den Tab zu öffnen.
 

John

Sehr aktives Mitglied
3. März 2012
2.592
496
Berlin
AW: Innerhalb einer Artikelseite per Link in ein Tab springen

Nachtrag.
Die bisherige Lösung scheitert leider in Variationskombinations-Kinderartikeln. Es wird unmittelbar nach dem Sprung auf das Tab die Startseite des SHops geladen und man ist aus dem Artikel raus.

Folgende Lösung funktioniert bei mir.

1. In dem Order /templates/JTL-Shop3-Tiny/js/ eine Datei namens "custom.js" erzeugen und in Ihr folgende Funktion speichern. Wenn diese Datei bereits vorhanden ist, die Funktion hinzufügen.

Code:
function showIt(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(true);
}

2. Als Link folgende Benutzen:

Code:
<a href="" onClick="showIt('mytabset');$('ul.semtabs li.meintab').trigger('click');return false;">Hier Dein Linktext</a>

li.meintab muß aus der class des jeweiligen tabs gebildet werden. Achtung, das ist NICHT immer der Name des Tabs. Da werden Groß- und Kleinschreibung verändert und Sonderzeichen entfernt. Ggf. mit Firebug nachschauen!
 

BlueEyePhoenix

Gut bekanntes Mitglied
3. Januar 2017
276
23
Hallo,

ich muss den thread nochmal aufgreifen.

versuche gerade den Tabsprung beim 4.05 shop einzubauen nur da klappt diese Verlinkung nicht. Wenn der zusätzliche Tab geöffnet ist wird der Tabsprung vollzogen aber wenn die Beschreibung offen ist und ein neuer Tab abgerufen werden sollte wird die Verlinkung in der Url angesprochen und nur nach reload wird der Tab aktiviert.
Die oben genante variante funktioniert somit leider auch nicht.

Hat jmd eine idee wie man den Tabspurng ohne reload erzielen kann?

Vielen dank
 

der_Martin

Sehr aktives Mitglied
13. Oktober 2016
320
26
Hallo,
möchte den thread auch noch mal aufrufen... bräuchte das für den 5er Nova Shop.

eventuell würde mir auch ein reload helfen.
Wenn ich die ID in der URL anspreche (z.b. https://blabla.com/irgendeeineSeite#meineTabID ) dann kann ich den Tab beim öffnen der Seite gleich öffnen .
Aber nicht wenn ich per Sprunglink innerhalb der Seite auf die ID des Tabs verlinke...Kann auch nicht per vollständiger URL innerhalb der Seite so verlinken.
und auch das geht nicht: <a href="javascript:" onclick="document.location.hash='#meineTabID';" >

Danke
Martin
 

Enrico_C

Aktives Mitglied
21. September 2020
27
2
Ist jemandem mittlerweile bekannt wie das mit einem Link in der Produktbeschreibung zu einem Tab funktioniert?
 

der_Martin

Sehr aktives Mitglied
13. Oktober 2016
320
26
Würde ich auch brauchen.
Hab nun ChatGPT gefragt:

----------------------------------------------

Wie kann ich in bootstrap per Link einen tab öffnen?

ChatGPT:
Um in Bootstrap einen Tab per Link zu öffnen, können Sie die data-toggle- und data-target-Attribute verwenden.

Der data-toggle-Wert sollte auf "tab" gesetzt werden, während der data-target-Wert auf die ID des Tabs verweisen sollte, den Sie öffnen möchten. Beispiel:

Copy code

HTML:
[B]<a href="#" data-toggle="tab" data-target="#tab-id">Tab Link</a>[/B]
Stellen Sie sicher, dass die ID des Tabs, den Sie öffnen möchten, in derselben Seite vorhanden ist und mit der ID in data-target übereinstimmt.

Copy code

HTML:
<div class="tab-content">
  <div id="tab-id" class="tab-pane">
    Tab Inhalt
  </div>
</div>
Achten Sie darauf, dass die Bootstrap CSS- und JS-Dateien eingebunden sind, damit die Tabs funktionieren.

------------------------------------------------------

Hat mit fast geholfen! :D

Am Beispiel der IDs des Benachrichtigungs-Tabs:

das hier springt auf den Tab, öffnet ihn aber nicht
<a href="#" data-toggle="tab" role="tab" data-target="#tab-link-availabilityNotification">test</a>

das hier öffnet mir den Tab, markiert ihn aber nicht
<a href="#" data-toggle="tab" role="tab" data-target="#tab-availabilityNotification">test2</a>


Hab wahrscheinlich falsch gefragt. Also ich geb auf.
 
Zuletzt bearbeitet:
Ähnliche Themen
Titel Forum Antworten Datum
Neu Link innerhalb Produktdetailseite auf Tab Templates für JTL-Shop 0
Neu Schriftgrößen innerhalb Wawi ändern Eigene Übersichten in der JTL-Wawi 3
In Diskussion Liquid error: Parameteranzahlkonflikt bei einer einfachen Anweisung Gelöste Themen in diesem Bereich 3
Neu Erstellen eines Sets, als Variation in Zusammenhang mit einer Stückliste Arbeitsabläufe in JTL-Wawi 2
Neu URL einer Unterkategorie weiterleiten Allgemeine Fragen zu JTL-Shop 3
Neu Programmierung eines Tools zur Verwaltung einer Datentabelle (JTL Shop 5) Technische Fragen zu Plugins und Templates 6
Neu Anpassen einer Rechnungsvorlage - Bearbeiten von Textbausteinen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 4
Wie kann ich eine Benachrichtigung bei einem Wareneingang auslösen mit einer Mail über die Artikel die eingebucht wurden JTL-Wawi 1.8 2
Neu CSV-Datei direkt in einer SQL-Abfrage verwenden User helfen Usern - Fragen zu JTL-Wawi 3
In Bearbeitung Umzug mit einer Kasse auf ein neues Gerät Allgemeine Fragen zu JTL-POS 2
Neu Kostenloses Webinar: BWA – Leg ich ab? Richtiges lesen einer BWA zur Unternehmenssteuerung im Onlinehandel Smalltalk 0
Neu Alle Artikel auf einer Seite im Shop anzeigen Allgemeine Fragen zu JTL-Shop 2
Neu Variationsartikel einer Stückliste zuordnen? Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 0
Neu Komponente einer Stückliste öffnen User helfen Usern - Fragen zu JTL-Wawi 1
Neu Sind eigene Felder im Artikel in einer neueren Wawi-Version von Anfang an sichtbar? User helfen Usern - Fragen zu JTL-Wawi 8

Ähnliche Themen