javascript - Divi Wordpress 主题 - 从外部页面打开带有 anchor 链接的选项卡

Question

当从外部页面(网站内)单击时，我尝试使用 anchor 链接打开某些选项卡。例如，我在主页上，单击 anchor 链接将我带到“我们的成员(member)”页面上的“商店”部分(选项卡)。

当我位于选项卡所在的页面上并单击 anchor 链接时，它会正确滚动到选项卡并打开它 --- 但是，如果我位于与选项卡所在的页面不同的页面上， anchor 链接仅转到该页面，不会打开选项卡。

网址:http://elkodowntown.wpengine.com/

anchor 链接位于导航中的我们的成员(member)菜单下。

这是我的 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'); }
        });

    });

这是 anchor 链接 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>

以下是一些选项卡 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>

为什么这仅适用于“成员(member)”页面，而不适用于其他页面？我该如何解决这个问题？

Answer 1

我最终得到了公司首席开发人员的帮助，他解决了我遇到的问题。

这里的核心区别是我们不需要监视每个元素上的点击处理程序，而是监视哈希状态更改。

当您位于成员部分时，在“#menu-item-98 .sub-menu li a”上添加了一个点击处理程序，该处理程序会停止并仅更改哈希值。

我添加了一些评论来帮助解释。

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;
        });
    }
});