Реализация вкладок с JQuery .click() в пользовательском шаблоне Wordpress

Question

Я разрабатываю веб-страницу в Wordpress 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();, чтобы остановить распространение события до его родителя. Надеюсь, это сработает для вас.