Wie Tabs verlinken?

[Ignatz]

Hallo,

ich schaffe es einfach nicht zu einem bestimmten Tab zu verlinken.
In den Einstellungen habe ich es aktiviert. Beim Anlegen der Tabs habe ich sinnvolle Tab IDs vergeben. Trotzdem springt er nicht zum Link in der Form http://www.domain.de/seite.html#tabID.

Liegt es daran, dass ich bereits Contao 3.1.1 nutze, oder fehlt es an irgend einer Einstellung?

Gruß,
Ignatz

[Ignatz]

Keiner eine Idee? Ich bin immer noch auf der Suche nach einer Lösung.

[Bas]

Ich bin kein Profi was das betrifft (und kenn auch die Erweiterung nicht), habe aber etwas ähnliches mal für nen Masonry-Layout benötigt.

Ich hab mittels jQuery den Hash ermittelt (welcher in meinen Fall wie die ID meines anzusteuernden Objektes lauten musste), und dann die benötigte Aktion ausgelöst.

Hash-Ermittlung:

jQuery(document).ready(function($){
    if ( $("body.hashcheck").length > 0 ) { // hashcheck hatte ich der betreffenden Seite als Body-Klasse hinzugefügt, damit das Script nur auf der gewünschten Seite läuft
        if(window.location.hash) {
            myHash = window.location.hash.substring(1, window.location.hash.length); // die Raute (#) entfernen, und den Hash in der Variablen "myHash" speichern
        }
    }
});

(Es muss natürlich noch geprüft werden, ob der ermittelte Hash gültig ist. Ausserdem würde es wahrscheinlich so nicht funktionieren, wenn ausser dem Hash irgendwelche Get-Parameter an der URL hängen.)

Ich hoffe das hilft ein wenig.

[Ignatz]

Hallo Bas,

vielen Dank für deine Antwort. Inzwischen habe ich herausgefunden, dass ich den Tabs den Parameter

autoAnchor: true 

mitgeben muss. So kann ich zumindest von einer Seite zu einem bestimmten Tab auf einer anderen Seite springen.
Leider gelingt aber der Sprung aus einem Tab der aktuellen Seite zu einem anderen Tab der gleichen Seite nicht.

Ich bin also nur einen halben Schritt weiter. Aber immerhin.

[d23]

Hallo Ignatz,

ich bin gerade eben über das gleiche Problem gestolpert.
Innerhalb einer Seite funktioniert die Verlinkung bei mir nur, wenn die komplette Seite mit dem Hashtag-Anhang komplett neu geladen wird.
Ist das bei Dir auch so?

[Ignatz]

Hallo d23,

ja genau, das ist der Effekt. Klicke ich auf den Link um zum Tab zu springen, wird der Tab-Reiter zwar fokussiert, aber der zugehörige Inhalt nicht nach vorn geholt. Erst ein neu laden der Seite mit dem Hashtag öffnet den entsprechenden Tab.

Hab's bisher noch nicht lösen können.

Gruß,
Ignatz

[KATgirl]

Verzögert mal das Ganze um ein paar Sekunden, denke das das DOM noch nicht vollständig bearbeitet ist zu dem Zeitpunkt.

.delay(3000)

Gesendet von meinem Nexus 7 mit Tapatalk 4

[Stepinsky]

Inzwischen habe ich herausgefunden, dass ich den Tabs den Parameter

autoAnchor: true 

mitgeben muss. So kann ich zumindest von einer Seite zu einem bestimmten Tab auf einer anderen Seite springen.

Wo setzt du den Parameter? Im Template? Wenn ja: in welchem?

Bei mir funktioniert die Verlinkung auf ein bestimmtes Tab ebenfalls nicht. Rufe ich den richtigen Seitenlink mit angehängtem Anker auf, springe ich innerhalb der Seite, aber es wird immer noch der Inhalt von Tab 1 angezeigt.

Keine Ahnung, ob es einen Zusammenhang gibt: Wenn ich über die einzelnen Tabs fahre, sehe ich einen falschen Link. Anstatt

domain.de/produkte/produkt.html#accessibletabscontent0-2

wird bei mir nur

domain.de/#accessibletabscontent0-2

angezeigt. Auf der Vorgänger-Seite, die nur den Originalcode von Dirk Ginader nutzt, haben die Tabs auch die richtige Verlinkung.

[Ignatz]

Hallo Stepinski,

den Parameter setze ich im "j_accessible_tabs"-Template:

<script>
    (function($) {
        $(document).ready(function(){
            <?php foreach(AccessibleTabsDS::getInstance()->getJsTemplate() as $item): ?>
            $("#<?php echo $item['id']; ?>").accessibleTabs({
                <?php echo $item['data']; ?>,
                autoAnchor: true
            });
            <?php endforeach; ?>
        });
    })(jQuery);
</script>

Aber, wie gesagt, klappt das nur bei Verlinkung auf den Tab einer anderen Seite. Innerhalb der Seite nicht!
In den Einstellungen der Accessible Tabs habe ich zwar einen Haken bei "Verlinkbare Tabs" und ich dachte, dass dieser Haken genau diese Anpassung im Template bewirkt aber leider tut er das nicht.

Gruß,
Ignatz

[Stepinsky]

Bei mir taucht der autoAnchor Parameter wohl schon im Original-Template auf. Die nach deiner Anleitung angepasste Version habe ich wieder gelöscht und der Code ist trotzdem korrekt (auch nach dem Löschen des Skript-Caches).

Schließlich bin ich im Backend bei den Tab-Einstellungen über die Lösung gestolpert - Bei der Definition der Tab-ID steht eigentlich schon alles

Tab ID kann überschrieben werden. Wird verwendet um ein Tab zu verlinken.

Darauf habe ich mir nochmals die Beispiele bei Dirk Ginader angesehen und tatsächlich wird nicht der beim Mouse Over angezeigte Anker, sondern diese nur im Quellcode bzw. Backend sichtbare ID für das <a> Tag in der Tab-Navi verwendet (siehe hier und hier).

<ul class="block tabs-list tabamount6">
<li>...</li>
<li>...</li>
<li id="accessibletabsnavigation0-2" class="first">
<a id="tab_51eea2fe4fbee" href="#accessibletabscontent0-2">Produkt 1</a>
</li>
<li>...</li>
</ul>

Anstatt wie oben geschrieben

domain.de/produkte/produkt.html#accessibletabscontent0-2

muss der Link bei mir also so aussehen:

domain.de/produkte/produkt.html#tab_51eea2fe4fbee

Es wäre praktisch gewesen, ich hätte dort tatsächlich sinnige IDs vergeben.

Erstaunlicherweise arbeitet der Code auf der alten Seite nur mit dem href beim Tab-Link, ohne Vergabe von IDs... Deshalb bin ich auch nicht vorher auf die Lösung gestoßen.

[Supermann]

Hallo,

ich habe die Aktuelle Version Installiert und versuche verzweifelt einige Links direckt anzuspringen. Von den externen Seite funktioniert das nur bei den Links auf der gleichen Seite funktioniert das nicht.

In dem 3er Change Text steht:

3.0.0 stable

Kompatibilität zu Contao ab Version 3.0
Alle Templates wurden überarbeitet
Tabs werden mittels data attribut konfiguriert
Einfachs verlinken von Tabs auf der Seite sowie von Extern möglich
Globale konfiguration entfernt. Vorkonfiguration über localconfig.php möglich

Das heißt für mich das es eigentlich gehen sollte. Hat jemand evtl. eine funktionierende Linklösung parat mit der das funktioniert?

Für hilfe wäre ich dankbar.

[holist]

Hab auch noch eine Weile gesucht bis ich die beiden Links fand:

jQuery Accessible Tabs - Wie man Tabs WIRKLICH zugänglich macht
http://blog.ginader.de/archives/2009...lich-macht.php

Und natürlich die GitHub-Seite
https://github.com/yfridelance/contao-accessible_tabs