Divi Wordpress Theme - открытая вкладка с привязкой ссылки с внешней страницы

Question

Я пытаюсь открыть определенные вкладки при использовании привязных ссылок при нажатии на внешнюю страницу (внутри сайта). Например, я на главной странице, и я нажимаю на ссылку привязки, чтобы перевести меня в раздел «Магазин» (вкладка) на странице «Наши участники».

Когда я нахожусь на странице, на которой находятся вкладки, и я нажимаю на ссылку привязки, она правильно прокручивается на вкладку и открывает ее, однако, если я на другой странице, чем на вкладках , привязка привязывается только к этой странице, она не открывает вкладку.

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

анкерной ссылки находятся под НАШИ ДЕПУТАТЫ меню в навигации.

Вот мой 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'); } 
     }); 

    }); 

Вот якорь ссылка 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> 

Почему это работает только на членов а не на других? Как я могу это исправить?

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