Innerhalb einer Artikelseite per Link in ein Tab springen

John

Sehr aktives Mitglied
3. März 2012
2.101
343
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
7
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.101
343
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
270
17
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
 

lahr-net

Gut bekanntes Mitglied
13. Oktober 2016
273
18
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
24
0
Ist jemandem mittlerweile bekannt wie das mit einem Link in der Produktbeschreibung zu einem Tab funktioniert?
 

lahr-net

Gut bekanntes Mitglied
13. Oktober 2016
273
18
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 Weiterleitung Seo, Shop zieht innerhalb der Domain um Allgemeine Fragen zu JTL-Shop 3
Neu Merkmale innerhalb Merkmalgruppe werden nicht angezeigt User helfen Usern - Fragen zu JTL-Wawi 7
Neu WaWi + POS innerhalb zwei Wochen? Welches Kassensystem? Einrichtung / Updates von JTL-POS 1
Neu Formel für ALLE Artikelnummern einer Bestellung auslesen Arbeitsabläufe in JTL-Wawi 0
Neu DotLiquid Befehle in Workflow - Anhang einer E-Mail JTL-Workflows - Ideen, Lob und Kritik 0
Neu Artikel einer AMAZON Bestellung können in WAWI gefunden werden Arbeitsabläufe in JTL-Wawi 2
Neu Bei einer Teillieferung von Stücklisten die korrekte Menge an Komponenten auf einem Lieferschein ausgeben Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Artikel nachträglich einer Wawi Pickliste hinzufügen? Arbeitsabläufe in JTL-Wawi 0
Neu Auftragspositionen von einem Workflow in einer eMail versenden User helfen Usern - Fragen zu JTL-Wawi 3
Neu Rechnung: Ausgabe der Zolltarifnummer unterhalb der Bezeichnung einer Position wenn mehrere Bedingungen erfüllt sind Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu Retourenetikett kann nicht mit einer bestimmen Versandart angelegt werden. Shipping Labels? Screen Inside! User helfen Usern - Fragen zu JTL-Wawi 0
Neu AMAZON Premium zu einer Pickliste zuordnen Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 1
In Diskussion Workflow möglich um Ebay Angebote zu einer bestimmten Zeit zu erstellen? JTL-Workflows - Ideen, Lob und Kritik 0
Neu Fehlende 0 am Anfang einer ArtikelNr. beim Export einer CSV. JTL-Ameise - Fehler und Bugs 6
Neu Zu viele Merkmalwerte in einer URL zwingen Server in die Knie? JTL-Shop - Fehler und Bugs 1
Neu Gesamt EK einer Produktionsstückliste anzeigen oder Export über Ameise möglich? Wie? JTL-Plan&Produce - Ideen, Lob und Kritik 3
Neu Variabeln für den Nettopreis und der Produktmenge einer Auftragsposition im List & Label Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Wenn ich einer bestimmte Artikel im Wawi Änderung durchführe kommt Error 500 PrestaShop-Connector 0
Neu Abholung und Versand in einer Bestellung Allgemeine Fragen zu JTL-Shop 0
In Diskussion Mehrere Voraussetzungen in einer Bedingung möglich? JTL-Workflows - Ideen, Lob und Kritik 2
Neu Alle Stücklisten einer Komponente ausgeben User helfen Usern - Fragen zu JTL-Wawi 3
Neu Reklamation einer Lieferantenbetellung User helfen Usern - Fragen zu JTL-Wawi 2
Neu Alle Bilder EINER Plattform entfernen User helfen Usern - Fragen zu JTL-Wawi 3
Neu Dot liquid Artikelnummern eines Auftrags in einer Zeile Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Wie kann ich ein Zahlungsziel in Tagen bei einer Zahlungsart hinterlegen? JTL-Wawi 1.6 4
Neu Strono einer Rechnung mit Rechnungsnummer nicht möglich JTL-Wawi 1.6 6
Neu Artikelseite nicht verfügbar - HTTP ERROR 500 Installation / Updates von JTL-Shop 10
Neu Spezialseite Versand Popup auf Artikelseite fehlerhaft Allgemeine Fragen zu JTL-Shop 2

Ähnliche Themen