Divi Wordpress主题 - 打开选项卡，其中包含来自外部页面的锚点链接

Question

I'm trying to open up certain tabs while using anchor links when clicked from an outside page (within the site). For instance, I'm on the homepage, and I click on the anchor link to take me to the Shop section (tab) on the Our Members page.

When I am on the page that the tabs are on, and I click on the anchor link, it correctly scrolls to the tab and opens it --- however, if I am on a different page than the tabs are on, the anchor link only goes to that page, it does not open the tab.

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

The Anchor links are under the OUR MEMBERS menu in the navigation.

Here's my JS:

jQuery(function($) {
        $('.menu-item-179 a').on('click', function(event){
            tabScroll('.et_pb_tab_0 a');
            return false;
        });
        function tabScroll(){
            $('#member-tabs .et_pb_tab_0 a').click();
            $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
        }
    jQuery(function($) {
        $('.menu-item-180 a').on('click', function(event){
            tabScroll('.et_pb_tab_1 a');
            return false;
        });
        function tabScroll(){
            $('#member-tabs .et_pb_tab_1 a').click();
            $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
        }
    });
    jQuery(function($) {
        $('.menu-item-181 a').on('click', function(event){
            tabScroll('.et_pb_tab_2 a');
            return false;
        });
        function tabScroll(){
            $('#member-tabs .et_pb_tab_2 a').click();
            $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
        }
    });
    jQuery(function($) {
        $('.menu-item-182 a').on('click', function(event){
            tabScroll('.et_pb_tab_3 a');
            return false;
        });
        function tabScroll(){
            $('#member-tabs .et_pb_tab_3 a').click();
            $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
        }
    });
    jQuery(function($) {
        $('.menu-item-183 a').on('click', function(event){
            tabScroll('.et_pb_tab_4 a');
            return false;
        });
        function tabScroll(){
            $('#member-tabs .et_pb_tab_4 a').click();
            $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
        }
    });
        $(function hash() {             var hash = $.trim( window.location.hash );
                        if (hash == '/our-members#shop') { tabscroll('.et_pb_tab_0 a'); }           if (hash == '/our-members#service') { tabscroll('.et_pb_tab_1 a'); }            if (hash == '/our-members#eat-drink') { tabscroll('.et_pb_tab_2 a'); }          if (hash == '/our-members#arts-entertainment') { tabscroll('.et_pb_tab_3 a'); }             if (hash == '/our-members#stay') { tabscroll('.et_pb_tab_4 a'); }
        });

    });

Here's the anchor link HTML:

<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-89 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-98"><a href="http://elkodowntown.wpengine.com/our-members/">Our Members</a>
<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="/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="/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="/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="/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="/our-members#stay">Stay</a></li>
</ul>
</li>

Here's some of the Tab HTML:

<div id="member-tabs" class="et_pb_module et_pb_tabs  et_pb_tabs_0 et_slide_transition_to_2 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>
                <div class="et_pb_all_tabs">

<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;">

<p><a name="shop"></a></p><div class="et_pb_blog_grid_wrapper"><div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_light  et_pb_blog_0" data-columns="2"><div class="column size-1of2"><article id="post-171" class="et_pb_post clearfix et_pb_no_thumb post-171 post type-post status-publish format-standard hentry category-shop">


                                                <h2 class="entry-title"><a href="http://elkodowntown.wpengine.com/blohm-jewelers/">Blohm Jewelers</a></h2>

                <div class="post-content"><p style="text-align:center;"><b>(775) 738-8466</b><br>
495 Idaho Street<br>
Elko, NV 89801<br>
<a href="http://www.blohmjewelers.com/" target="_blank">www.blohmjewelers.com</a></p>
</div>          
            </article><article id="post-169" class="et_pb_post clearfix et_pb_no_thumb post-169 post type-post status-publish format-standard hentry category-shop">


                                                <h2 class="entry-title"><a href="http://elkodowntown.wpengine.com/cedar-creek-clothing/">Cedar Creek Clothing</a></h2>

                <div class="post-content"><p style="text-align:center;"><b>(775) 738-3950</b><br>
453 Idaho Street<br>
Elko, NV 89801<br>
<a href="http://www.cedarcreekclothing.com/" target="_blank">www.cedarcreekclothing.com</a></p>
</div>          
            </article><article id="post-167" class="et_pb_post clearfix et_pb_no_thumb post-167 post type-post status-publish format-standard hentry category-shop">


                                                <h2 class="entry-title"><a href="http://elkodowntown.wpengine.com/cucina-fresca/">Cucina Fresca</a></h2>

                <div class="post-content"><p style="text-align:center;"><b>(775) 738-4670</b><br>
460 Idaho Street<br>
Elko, NV 89801<br>
<a href="http://www.cucinafresca.net/" target="_blank">www.cucinafresca.net</a></p>
</div>          
            </article></div><div class="column size-1of2"><article id="post-170" class="et_pb_post clearfix et_pb_no_thumb post-170 post type-post status-publish format-standard hentry category-shop">


                                                <h2 class="entry-title"><a href="http://elkodowntown.wpengine.com/blooms-grooms/">Blooms &amp; Grooms</a></h2>

                <div class="post-content"><p style="text-align: center;"><b>(775) 778-3151</b><br>
423 5th Street<br>
Elko, NV 89801<br>
<a href="http://www.bloomsandgrooms.com/" target="_blank">www.bloomsandgrooms.com</a></p>
</div>          
            </article><article id="post-168" class="et_pb_post clearfix et_pb_no_thumb post-168 post type-post status-publish format-standard hentry category-shop">


                                                <h2 class="entry-title"><a href="http://elkodowntown.wpengine.com/bodilys-furniture/">Bodily’s Furniture</a></h2>

                <div class="post-content"><p style="text-align:center;"><b>(775) 738-3136</b><br>
440 Commercial Street<br>
Elko, NV 89801<br>
<a href="http://www.bodilys.com/" target="_blank">www.bodilys.com</a></p>
</div>          
            </article><article id="post-166" class="et_pb_post clearfix et_pb_no_thumb post-166 post type-post status-publish format-standard hentry category-shop">


                                                <h2 class="entry-title"><a href="http://elkodowntown.wpengine.com/custom-stained-glass/">Custom Stained Glass</a></h2>

                <div class="post-content"><p style="text-align:center;"><b>(775) 738-1344</b><br>
397 Court Street<br>
Elko, NV 89801<br>
<a href="http://www.cherylsartglass.blogspot.com/" target="_blank">www.cherylsartglass.blogspot.com</a></p>
</div>          
            </article></div></div> <!-- .et_pb_posts --><div class="pagination clearfix">
    <div class="alignleft"><a href="http://elkodowntown.wpengine.com/our-members/page/2/">« Older Entries</a></div>
    <div class="alignright"></div>
</div>
            </div>

            </div> <!-- .et_pb_tab --><div class="et_pb_tab clearfix et_pb_tab_1" style="z-index: 1;">

<p><a name="service"></a></p><div class="et_pb_blog_grid_wrapper"><div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_light  et_pb_blog_1" data-columns="2"><div class="column size-1of2"><div class="entry">
<!--If no results are found-->
    <h1>No Results Found</h1>
    <p>The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.</p>
</div></div><div class="column size-1of2"></div></div> <!-- .et_pb_posts --></div>

            </div> <!-- .et_pb_tab --><div class="et_pb_tab clearfix et_pb_tab_2" style="z-index: 1; display: none; opacity: 0;">

<p><a name="eat-drink"></a></p><div class="et_pb_blog_grid_wrapper"><div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_light  et_pb_blog_2" data-columns="2"><div class="column size-1of2"><div class="entry">
<!--If no results are found-->
    <h1>No Results Found</h1>
    <p>The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.</p>
</div></div><div class="column size-1of2"></div></div> <!-- .et_pb_posts --></div>

            </div> <!-- .et_pb_tab --><div class="et_pb_tab clearfix et_pb_tab_3 et-pb-moved-slide" style="z-index: 2; display: none; opacity: 0;">

<p><a name="arts-entertainment"></a></p><div class="et_pb_blog_grid_wrapper"><div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_light  et_pb_blog_3" data-columns="2"><div class="column size-1of2"><div class="entry">
<!--If no results are found-->
    <h1>No Results Found</h1>
    <p>The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.</p>
</div></div><div class="column size-1of2"></div></div> <!-- .et_pb_posts --></div>

            </div> <!-- .et_pb_tab --><div class="et_pb_tab clearfix et_pb_tab_4" style="z-index: 1;">

<p><a name="stay"></a></p><div class="et_pb_blog_grid_wrapper"><div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_light  et_pb_blog_4" data-columns="2"><div class="column size-1of2"><div class="entry">
<!--If no results are found-->
    <h1>No Results Found</h1>
    <p>The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.</p>
</div></div><div class="column size-1of2"></div></div> <!-- .et_pb_posts --></div>

            </div> <!-- .et_pb_tab -->

                </div> <!-- .et_pb_all_tabs -->
            </div>

Why is this only working on the Members page and not on the others? How can I fix this?

Answer 1

I ended up getting help from a lead developer at my company, who was able to resolve the issue I was having.

The core difference here is we don't need to watch for click handlers on each item, rather watch for hash state changes.

A click handler was added on '#menu-item-98 .sub-menu li a' when you are in the members sections that stops prevents reloads and only changes hash value.

I added some comments to help explain.

function _setTab(){
    // get current hash value
    var curHash = window.location.hash.substr(1);
    // only continue if hash provided and scoped to member tabs
    if( !curHash || !curHash.match('member-tabs') ){ return false; }

    // split and int val tab num
    curHash = parseInt(curHash.split('|')[1]);

    // ignore if tab is current state
    if( curHash === window._tabSelected ){ return false; }
    // set current tab to window
    window._tabSelected = curHash;

    // add click event to tab selected
    switch(curHash){
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
            jQuery('#member-tabs .et_pb_tab_'+curHash+' a').click();
        break;

        default:
            return false;
        break;
    }

    // scroll to tabs container
    _scrollToTabs();
}

// scroll to member tabs continer with 50px offset
function _scrollToTabs(){
    var oTabs = jQuery('#member-tabs');
    if( oTabs.length > 0 ){
        jQuery('html,body').animate({
            scrollTop: (oTabs.offset().top - 50)
        }, 1000);
    }
    return false;
}

// set falsey state for tab selected on load
window._tabSelected = false;

// we need to attach to window load because the tabs functions are initialized later in document
jQuery(window).on('load', function(){
    // check for initial hash state
    _setTab();

    // add hash change window listener
    jQuery(window).on('hashchange', function(){
        _setTab()
    });

    // void submenu when we are in member section 
    var curPath = window.location.pathname;
    if( curPath.match('our-members') ){
        // only change hash and do not reload page
        jQuery('#menu-item-98 .sub-menu li a').on('click', function(e){
            e.stopImmediatePropagation();
            window.location.hash = jQuery(this).prop('hash');
            return false;
        });
    }
});