WordpressカスタムテンプレートのJquery .click（）でタブを実装する

Question

WordpressでWebページを開発しています。hereここではJqueryを使用してタブを実装しています。

画像のスクロールバーで特定のサムネイル画像をクリックすると、その下のセクションに対応するタブが開きます。これは正しく動作しています。

実際のタブ名をクリックすると、タブの内容が[Jquery .show（）が動作していない可能性がありますか？]というメッセージが表示されます。私のjavascript関数は、画像のサムネイルやタブ名をクリックしても、同じクラスに基づいてコンテンツを表示/非表示にするように設定されています。アドバイスをいただければ幸いです。

以下

私のjavascriptです：

以下

<script type="text/javascript"> 
window.onload = function(){ 
<?php 
if($post_objects){ 
    foreach($post_objects as $post_object){ ?> 
    //product images and tabs 
     jQuery(".outfit-selector-<?= $post_object->ID ?>").click(function(){ 
      jQuery(".wc-tab").hide(); 
      jQuery(".outfit-details-panel").hide(); 
      jQuery(".outfit-item-container").hide(); 
      jQuery(".product-details-pane-<?= $post_object->ID; ?>").show(); 
      jQuery(".outfit-item-container-<?= $post_object->ID; ?>").show(); 
      //tab active state 
      jQuery('li').removeClass('active'); 
      jQuery(".tab-<?= $post_object->ID; ?>").addClass('active'); 
     }); 
    <?php } 
} 
?> 
    //outfit image and tab 
    jQuery(".outfit-selector-whole").click(function(){ 
     jQuery(".wc-tab").hide(); 
     jQuery(".outfit-item-container").hide(); 
     jQuery(".outfit-details-panel").show(); 
     jQuery("#outfit-ms-whole").show(); 
     //tab active state 
     jQuery('li').removeClass('active'); 
     jQuery(".outfit-tab").addClass('active'); 
    }); 
} 
</script> 

ページの負荷のHTMLの簡単な例です：

<div class="outfit-images-pane"> 
    <div id="ms-selector" class="outfit-selector MagicScroll mcs-border"> 
     <div class='outfit-selector-whole outfit-selector-item'><img src='outfit-description.jpg' /></div> 
     <div class='outfit-selector-231 outfit-selector-item'><img src='hats.jpg' /></div> 
     <div class='outfit-selector-224 outfit-selector-item'><img src='casual-shirts.jpg' /></div> 
    </div> 
</div> 
<div class="outfit-details-pane"> 
    <div class='woocommerce-tabs wc-tabs-wrapper'> 
     <ul class='tabs wc-tabs'> 
      <li class='outfit-selector-whole active description_tag outfit-tab'><a href='#outfit-description'>Outfit Description</a></li> 
      <li class='outfit-selector-231 tab-231 description_tag'><a href='#Hats' class='product-tab-231'>Hats</a></li> 
      <li class='outfit-selector-224 tab-224 description_tag'><a href='#CasualShirts' class='product-tab-224'>Casual Shirts</a></li> 
     </ul> 
     <div class='outfit-details-panel woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab'> 
      <div class='post_content'> 
       <h3>Outfit Description</h3> 
       <p>Tab content goes here.</p> 
      </div> 
     </div> 
     <div class='product-details-pane-231 woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab' style='display:none;'> 
      <div class='post-content'> 
       <h3><a href='url'>Tab Title</a></h3> 
       <span class="amount"><span class="currencySymbol">&#36;</span>0.00</span> 
       <p>Tab content goes here.</p> 
      </div> 
     </div> 
     <div class='product-details-pane-224 woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab' style='display:none;'> 
      <div class='post-content'> 
       <h3><a href='url'>Tab Title</a></h3> 
       <span class="amount"><span class="currencySymbol">&#36;</span>0.00</span> 
       <p>Sold at: Store</p> 
       <p>Tab content goes here.</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたはコードの下で試すことができます：

<script type="text/javascript"> 
window.onload = function(){ 
<?php 
if($post_objects){ 
    foreach($post_objects as $post_object){ ?> 
    //product images and tabs 
     jQuery(".outfit-selector-<?= $post_object->ID ?>").click(function(e){ 
      jQuery(".wc-tab").hide(); 
      jQuery(".outfit-details-panel").hide(); 
      jQuery(".outfit-item-container").hide(); 
      jQuery(".product-details-pane-<?= $post_object->ID; ?>").show(); 
      jQuery(".outfit-item-container-<?= $post_object->ID; ?>").show(); 
      //tab active state 
      jQuery('li').removeClass('active'); 
      jQuery(".tab-<?= $post_object->ID; ?>").addClass('active'); 
      e.stopImmediatePropagation(); // stopping the event propagation 
     }); 
    <?php } 
} 
?> 
    //outfit image and tab 
    jQuery(".outfit-selector-whole").click(function(e){ 
     jQuery(".wc-tab").hide(); 
     jQuery(".outfit-item-container").hide(); 
     jQuery(".outfit-details-panel").show(); 
     jQuery("#outfit-ms-whole").show(); 
     //tab active state 
     jQuery('li').removeClass('active'); 
     jQuery(".outfit-tab").addClass('active'); 
     e.stopImmediatePropagation(); // stopping the event propagation 
    }); 
} 
</script> 

私たちは、 e.stopImmediatePropagation();を使用して、その親へのイベント伝播を停止しています。それがあなたのために働くことを願っています。