Javascript Wordpress Divi主题-锚链接打开选项卡切换

我正在尝试获取锚链接，以打开特定页面上的选项卡

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

网址：

锚定链接位于导航中的我们的会员菜单下

JS:

锚定链接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>

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

锚定链接（#商店，#服务等）由

调用（直接在HTML选项卡下）：

我相信有更好的方法来组织我的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);
}

最后一步是确保在您的条件下可以访问此新功能。对于当前的代码结构，它应该放在

$（函数hash（）{}）的正上方或正下方

最终，您应该重新构造代码，以便每次单击都链接到这个新的
tabscroll（）
函数，但这应该足以解决目前的问题：）

希望这有帮助！：）
 您有多个
tabScroll
函数，它们实际上应该是作为参数传入目标的单个函数。但这不应该影响你的问题。对于您的问题，这可能不是答案，但是您的jQuery
tabScroll
函数在尝试滚动到目标链接之前是否正在单击它们？在滚动之前不会重定向吗？我会尝试交换这两个选项，然后在一个与滚动动画长度相同的
setTimeout
中单击：）@obsidian-我不确定我是否完全理解你的评论。应该是这样吗<代码>$（“html，body”）.animate（{scrollTop:$（'#成员选项卡'）.offset（）.top}，1000）；setTimeout（$（'#成员选项卡.et_pb_选项卡_1 a'）。单击（）；）是的，这就是我所指的。在运行滚动到目标链接的动画之前，您使用jQuery单击这些目标链接——我很惊讶您竟然看到了滚动：）当然，滚动在当前代码中需要时间（1秒），因此您可能还需要将单击事件延迟一秒，方法是将其包装为
setTimeout
。这只是一个理论，不一定是解决方案；）@黑曜石，这里是我拥有的：
$（“html，body”）.animate（{scrollTop:$（'#member tabs'）.offset（）.top}，1000）；setTimeout（$（'#member tabs.et_pb_tab_1 a'）。单击（），2000）我想我找到了解决办法--请容忍：）我做错了什么。我已经在上面的问题中更新了我的JS。我不理解你在代码中使用（target）和+target+。我要用.et_pb_tab_类替换它吗？我不需要定义目标吗？更新的代码有两个问题——首先，您更新了指向我推荐的新结构的主链接，但忘记在每个选项卡滚动中传递
target
。例如，
$（'.menu-item-179 a'）。在（'click'）上，函数（事件）{
必须调用
tabscroll（'.et#pb#tab_1'）；
。第二个问题是您使用的是
设置超时（$（'.#成员选项卡+目标+a'）
而不是
设置超时（$（'.#成员选项卡+目标+a'））
——您需要确保JavaScript变量
target
不是作为字符串传递的：）我在函数中使用
target
基本上只是将变量传递给函数。传递给
tabscroll（）
的任何内容都会变成
target
，允许您为不同的场景注入不同的代码（您的示例中需要不同的目标）。例如，
tabscroll（'.et_-pb_-tab_-1'）
调用将有一个
target
等价于
。et_-pb_-tab_-1
，而
tabscroll（'.et_-pb_-tab_-0'）
将有一个
等价于
的
目标。希望这对您的理解有所帮助：）它不起作用，因为你没有
function tabscroll(target) {
  $('#member-tabs' + target + ' a').click();
  $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
}