javascript - Wordpress Divi主题- anchor 链接打开选项卡切换

我正在尝试获取锚定链接以打开特定页面上的标签。

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

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

锚链接位于导航中的我们的成员菜单下。

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：

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

标签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>

锚链接（＃shop，＃service等）由<a name="#shop">在此处（直接在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>

我敢肯定有更好的方式来组织我的JS。

任何帮助表示赞赏！

最佳答案

在看了一段时间的代码后，问题终于浮现在我身上。当前，您将每个点击处理程序包装在各自的jQuery函数中：

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($) { ...

在每种情况下，tabscroll()仅具有相对于外部jQuery函数的作用域。也就是说，在上述情况下，只有menu-item-183可以访问该特定的tabscroll()函数。

您稍后尝试在该范围之外引用tabscroll()函数：

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

正如该块读取的那样，所有条件语句都试图做完全相同的事情（在没有给定参数的情况下调用tabscroll()），该条件实质上可以写为：

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

但是您需要tabscroll函数重定向到与hash不同的不同位置，这意味着您必须手动将它们分开：

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

然后只需更改您的tabscroll函数即可：

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

最后一步是确保可以根据您的状况访问此新的tabscroll()函数。使用当前的代码结构，应将其放置在$(function hash() {});的正上方或正下方

最终，您应该重组代码，以便每次单击都链接到此新的tabscroll()函数，但这现在足以解决问题了：）

希望这可以帮助！ :)