Divi Wordpress Theme - 外部ページのアンカーリンクを開いたタブ

外部のページ（サイト内）からクリックしたときにアンカーリンクを使用しているときに、特定のタブを開こうとしています。たとえば、私はホームページにいます。アンカーリンクをクリックすると、私のメンバーページのショップセクション（タブ）に移動します。Divi Wordpress Theme - 外部ページのアンカーリンクを開いたタブ

タブ上にあるアンカーリンクをクリックすると、正しくタブにスクロールして開きます---しかし、タブとは別のページにある場合アンカーリンクはそのページに移動するだけで、タブは開きません。

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です：

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

は、なぜこれが唯一のメンバーに取り組んでいる：

<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の一部です他のページには表示されませんか？これをどうすれば解決できますか？

出典

2017-01-30 Trisha

私の問題を解決できた私の会社の主任開発者から助けを受けました。

ここで重要な違いは、各アイテムのクリックハンドラを監視する必要はなく、ハッシュ状態の変更を監視することです。

リロードを阻止し、ハッシュ値のみを変更するメンバーセクションにいるとき、 '＃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; 
     }); 
    } 
});

出典

2017-01-31 19:23:28 Trisha

Divi Wordpress Theme - 外部ページのアンカーリンクを開いたタブ

答えて

関連する問題