javascript - 在 WordPress 自定义模板中使用 Jquery .click() 实现选项卡

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();停止事件传播到其父级。我希望它对您有用。