Wordpress Divi主题 - 锚链接打开标签切换 [英] Wordpress Divi Theme - Anchor link opens tab toggle

问题描述

我试图获取锚点链接以打开特定页面上的标签页。

I am trying to get anchor links to open up tabs on a specific 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.

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

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

The Anchor links are under the OUR MEMBERS menu in the 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：

<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下）：

The anchor links (#shop,#service, etc) are being called by <a name="#shop"> here (directly under the 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。

I'm sure there is a better way to organize my JS.

任何帮助都很感激！

推荐答案

曙光。您目前将每个点击处理程序包装在自己的jQuery函数内：

After looking through the code for a while, the problem finally dawned on me. You currently wrap each of the click handlers inside their own jQuery function:

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

在每个上下文中， code> tabscroll（）只具有相对于外部jQuery函数的范围。也就是说，在上述上下文中， -item-183 将有权访问 tabscroll（）函数。

In each of these contexts, tabscroll() only has scope relative to the outer jQuery function. That is to say, in the above context, only menu-item-183 will have access to that particular tabscroll() function.

您稍后尝试引用该范围之外的 tabscroll（）函数：

You later try to reference the tabscroll() function outside of that scope:

$(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（）没有给定参数），条件可以写为：

As this block reads, all conditionals are trying to do the exact same thing (call tabscroll() with no given parameter), and the condition could essentially be written as:

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

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

But you need the tabscroll function to redirect to different locations that aren't the same as hash, which means you have to manually separate them out:

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函数即可：

Then simply change your tabscroll function to allow for this:

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

最后一步是确保这新 tabscroll（）函数可从您的条件访问。使用当前的代码结构，它应该放置在 $（函数hash（）{}）;

The final step is to make sure that this new tabscroll() function is accessible from your condition. With your current code structure, it should be placed just above or below $(function hash() {});

最后你应该重构你的代码，以便每次点击链接到这个新的 tabscroll（）函数，但这应该足以解决问题了：）

Ultimately you should restructure your code so that every click links to this new tabscroll() function, but this should be enough to solve the problem for now :)

希望这有助于！ ：）

这篇关于Wordpress Divi主题 - 锚链接打开标签切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！