WordPress Divi Theme – Ankerlink öffnet Tab-Umschalter

Lesezeit: 7 Minuten

Wordpress Divi Theme – Ankerlink offnet Tab Umschalter
Trischa

Ich versuche, Ankerlinks zu erhalten, um Registerkarten auf einer bestimmten Seite zu öffnen.

Wenn ich mich auf der Seite befinde, auf der sich die Registerkarten befinden, und auf den Ankerlink klicke, wird korrekt zu der Registerkarte gescrollt und sie geöffnet – wenn ich mich jedoch auf einer anderen Seite als die Registerkarten befinde, wird der Ankerlink angezeigt geht nur zu dieser Seite, es öffnet nicht die Registerkarte.

URL: http://elkodowntown.wpengine.com/

Die Ankerlinks befinden sich unter der UNSERE MITGLIEDER Menü in der Navigation.

JS:

    jQuery(function($) {
        $('.menu-item-179 a').on('click', function(event){
            tabScroll('.et_pb_tab_0');
            return false;
        });
        $('.menu-item-180 a').on('click', function(event){
            tabScroll('.et_pb_tab_1');
            return false;
        });
        $('.menu-item-181 a').on('click', function(event){
            tabScroll('.et_pb_tab_2');
            return false;
        });
        $('.menu-item-182 a').on('click', function(event){
            tabScroll('.et_pb_tab_3');
            return false;
        });
        $('.menu-item-183 a').on('click', function(event){
            tabScroll('.et_pb_tab_4');
            return false;
        });

    function tabscroll(target) {
        $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
        setTimeout($('#member-tabs' + target + ' a').click(), 2000 );
    }

    $(function hash() {
        var hash = window.location.hash.replace('#', "");

        if (hash == '#shop') { tabscroll('.et_pb_tab_1'); }
        if (hash == '#service') { tabscroll('.et_pb_tab_0'); }
        if (hash == '#eat-drink') { tabscroll('.et_pb_tab_2'); }
        if (hash == '#arts-entertainment') { tabscroll('.et_pb_tab_3'); }
        if (hash == '#stay') { tabscroll('.et_pb_tab_4'); }
    });
});

HTML-Ankerlinks:

<ul class="sub-menu">
    <li id="menu-item-179" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-179"><a href="http://stackoverflow.com/our-members#shop">Shop</a></li>
    <li id="menu-item-180" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-180"><a href="http://stackoverflow.com/our-members#service">Service</a></li>
    <li id="menu-item-181" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-181"><a href="http://stackoverflow.com/our-members#eat-drink">Eat &amp; Drink</a></li>
    <li id="menu-item-182" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-182"><a href="http://stackoverflow.com/our-members#arts-entertainment">Arts &amp; Entertainment</a></li>
    <li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-183"><a href="http://stackoverflow.com/our-members#stay">Stay</a></li>
</ul>

Registerkarten-HTML:

<div id="member-tabs" class="et_pb_module et_pb_tabs  et_pb_tabs_0 et_slide_transition_to_3 et_slide_transition_to_0">
                <ul class="et_pb_tabs_controls clearfix">
                    <li class="et_pb_tab_0 et_pb_tab_active"><a href="#">Shop</a></li><li class="et_pb_tab_1"><a href="#">Service</a></li><li class="et_pb_tab_2"><a href="#">Eat &amp; Drink</a></li><li class="et_pb_tab_3"><a href="#">Arts &amp; Entertainment</a></li><li class="et_pb_tab_4"><a href="#">Stay</a></li>
                </ul>

Die Ankerlinks (#shop,#service usw.) werden von aufgerufen <a name="#shop"> hier (direkt unter dem Tabs HTML):

<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_0 et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">
    <a name="shop"></a><!--- tab content here --->
</div>

Ich bin mir sicher, dass es einen besseren Weg gibt, mein JS zu organisieren.

Jede Hilfe ist willkommen!

  • Sie haben mehrere tabScroll Funktionen, die eigentlich eine einzelne Funktion sein sollten, die ein Ziel als Parameter übergibt. Das sollte deine Frage aber nicht beeinflussen. Was Ihre Frage betrifft, so ist dies möglicherweise nicht die Antwort, sondern Ihre jQuery tabScroll Funktionen klicken auf die Ziellinks Vor versuchen, zu ihnen zu scrollen? Würde das nicht sowieso vor einem Scrollen umleiten? Ich würde versuchen, diese beiden zu vertauschen, und dann den Klick in a setzen setTimeout von der gleichen Länge wie die Scroll-Animation 🙂

    – Obsidianalter

    25. Januar 2017 um 21:10 Uhr

  • @obsidian – Ich bin mir nicht sicher, ob ich Ihren Kommentar vollständig verstehe. Soll es so aussehen?? $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000); setTimeout($('#member-tabs .et_pb_tab_1 a').click(); );

    – Trischa

    25. Januar 2017 um 21:16 Uhr


  • Ja, darauf bezog ich mich. Sie verwenden jQuery, um auf diese Ziellinks zu klicken, bevor Sie die Animation ausführen, die zu ihnen scrollt – ich bin überrascht, dass Sie das Scrollen überhaupt sehen 🙂 Natürlich dauert das Scrollen in Ihrem aktuellen Code Zeit (1 Sekunde). Sie müssen möglicherweise auch verzögern das Klickereignis um eine Sekunde, indem Sie es in a einschließen setTimeout. Das ist aber nur eine Theorie, nicht unbedingt die Lösung 😉

    – Obsidianalter

    25. Januar 2017 um 21:19 Uhr

  • @obsidian, hier ist was ich habe: $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000); setTimeout($('#member-tabs .et_pb_tab_1 a').click(), 2000 );

    – Trischa

    25. Januar 2017 um 21:25 Uhr


  • Ich glaube, ich habe die Lösung – ertrage es mit mir 🙂

    – Obsidianalter

    25. Januar 2017 um 21:34 Uhr

Wordpress Divi Theme – Ankerlink offnet Tab Umschalter
Obsidian-Zeitalter

Nachdem ich den Code eine Weile durchgesehen hatte, dämmerte mir endlich das Problem. Sie packen derzeit jeden der Klick-Handler in ihre eigene jQuery-Funktion:

jQuery(function($) {
    $('.menu-item-183 a').on('click', function(event){
        tabScroll();
        return false;
    });
    function tabScroll(){
        $('#member-tabs .et_pb_tab_4 a').click();
        $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
    }
});
jQuery(function($) { ...

In jedem dieser Kontexte tabscroll() hat nur einen Gültigkeitsbereich relativ zur äußeren jQuery-Funktion. Das heißt, im obigen Zusammenhang nur menu-item-183 wird Zugriff haben das besondere tabscroll() Funktion.

Sie versuchen später, auf die zu verweisen tabscroll() Funktion außerhalb dieses Bereichs:

$(function hash() {
  var hash = window.location.hash.replace('#', "");
  if (hash == '#shop') { tabscroll(); }
  if (hash == '#service') { tabscroll(); }
  if (hash == '#eat-drink') { tabscroll(); }
  if (hash == '#arts-entertainment') { tabscroll(); }
  if (hash == '#stay') { tabscroll(); }
});

Während dieser Block liest, versuchen alle Bedingungen, genau dasselbe zu tun (call tabscroll() ohne gegebenen Parameter), und die Bedingung könnte im Wesentlichen wie folgt geschrieben werden:

if (hash == '#shop' || hash == '#service' || ... ) {
  tabscroll();
}

Aber du brauchst die tabscroll Funktion, um an verschiedene Orte umzuleiten, die sind nicht dasselbe wie hashwas bedeutet, dass Sie sie manuell trennen müssen:

if (hash == '#shop') { tabscroll('.et_pb_tab_1'); }
if (hash == '#service') { tabscroll('.et_pb_tab_0'); }
if (hash == '#eat-drink') { tabscroll('.et_pb_tab_2'); }
if (hash == '#arts-entertainment') { tabscroll('.et_pb_tab_3'); }
if (hash == '#stay') { tabscroll('.et_pb_tab_4'); }

Dann ändern Sie einfach Ihre Tabscroll-Funktion, um dies zu ermöglichen:

function tabscroll(target) {
  $('#member-tabs' + target + ' a').click();
  $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
}

Der letzte Schritt besteht darin, sicherzustellen, dass dies der Fall ist Neu tabscroll() Funktion ist von Ihrem Zustand aus zugänglich. Mit Ihrer aktuellen Codestruktur sollte es direkt darüber oder darunter platziert werden $(function hash() {});

Letztendlich sollten Sie Ihren Code so umstrukturieren, dass jeder Klick auf diesen neuen Link verweist tabscroll() Funktion, aber das sollte ausreichen, um das Problem vorerst zu lösen 🙂

Hoffe das hilft! 🙂

  • Ich mache etwas falsch. Ich habe mein JS in meiner obigen Frage aktualisiert.

    – Trischa

    25. Januar 2017 um 22:00 Uhr

  • Ich verstehe Ihre Verwendung von (Ziel) und + Ziel + im Code nicht. soll ich das durch die .et_pb_tab_-Klassen ersetzen? Muss ich das Ziel nicht definieren?

    – Trischa

    25. Januar 2017 um 22:18 Uhr


  • Es gibt zwei Probleme mit Ihrem aktualisierten Code – erstens haben Sie Ihre Hauptlinks auf die von mir empfohlene neue Struktur aktualisiert, aber vergessen, sie durchzugehen target in jeder dieser Registerkarten. Zum Beispiel, $('.menu-item-179 a').on('click', function(event){ muss anrufen tabscroll('.et_pb_tab_1');. Ihr zweites Problem ist, dass Sie verwenden setTimeout($('#member-tabs + target + a') anstatt setTimeout($('#member-tabs' + target + ' a') – Sie müssen sicherstellen, dass die JavaScript-Variable target wird nicht als String übergeben 🙂

    – Obsidianalter

    25. Januar 2017 um 22:22 Uhr

  • Meine Verwendung von target in der Funktion ist im Wesentlichen nur das Übergeben einer Variablen an eine Funktion. Was auch immer Sie passieren zu tabscroll() wird target, sodass Sie unterschiedlichen Code für unterschiedliche Szenarien einfügen können (in Ihrem Beispiel möchten Sie unterschiedliche Ziele). Zum Beispiel, tabscroll('.et_pb_tab_1') Anruf hat a target gleichwertig .et_pb_tab_1während tabscroll('.et_pb_tab_0') wird ein haben target gleichwertig .et_pb_tab_0. Hoffe das hilft beim Verständnis 🙂

    – Obsidianalter

    25. Januar 2017 um 22:26 Uhr

  • Es funktioniert nicht, weil Sie meine Lösung nicht richtig befolgt haben 🙂 Machen Sie die beiden Aktualisierungen, die ich in meinen Kommentaren angegeben habe, und es wird korrekt funktionieren. Wenn nicht, kehren Sie zu Ihrem ursprünglichen Code zurück und nur wenden Sie meine Antwort an, anstatt auch die Struktur Ihrer Klicks zu ändern.

    – Obsidianalter

    25. Januar 2017 um 22:27 Uhr

1004130cookie-checkWordPress Divi Theme – Ankerlink öffnet Tab-Umschalter

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy