WordPress Divi Theme – Ankerlink öffnet Tab-Umschalter

Question 1

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!

Question 2

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! 🙂