Javascript 在Wordpress自定义模板中使用Jquery.click（）实现选项卡

我正在Wordpress中开发一个网页，在这里我使用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>

window.onload=函数（）{
//产品图片和标签
jQuery（“.configure selector-”）。单击（函数（）{
jQuery（“.wc tab”）.hide（）；
jQuery（“装备详细信息面板”）.hide（）；
jQuery（“.containment item container”）.hide（）；
jQuery（“.product details pane-”）.show（）；
jQuery（“.Fatty item container-”）.show（）；
//选项卡活动状态
jQuery（'li'）.removeClass（'active'）；
jQuery（“.tab-”）.addClass（'active'）；
});
//装备图像和标签
jQuery（“.com”）。单击（函数（）{
jQuery（“.wc tab”）.hide（）；
jQuery（“.containment item container”）.hide（）；
jQuery（“装备详细信息面板”）.show（）；
jQuery（“#装备ms整体”）.show（）；
//选项卡活动状态
jQuery（'li'）.removeClass（'active'）；
jQuery（“装备选项卡”）.addClass（“活动”）；
});
}

下面是页面加载时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>

装备描述
标签内容在这里

$0
标签内容在这里

$0
在：商店出售

标签内容在这里

您可以尝试使用以下代码：

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

window.onload=函数（）{
//产品图片和标签
jQuery（“.configure selector-”）。单击（函数（e）{
jQuery（“.wc tab”）.hide（）；
jQuery（“装备详细信息面板”）.hide（）；
jQuery（“.containment item container”）.hide（）；
jQuery（“.product details pane-”）.show（）；
jQuery（“.Fatty item container-”）.show（）；
//选项卡活动状态
jQuery（'li'）.removeClass（'active'）；
jQuery（“.tab-”）.addClass（'active'）；
e、 stopImmediatePropagation（）；//停止事件传播
});
//装备图像和标签
jQuery（“.e”）。单击（函数（e）{
jQuery（“.wc tab”）.hide（）；
jQuery（“.containment item container”）.hide（）；
jQuery（“装备详细信息面板”）.show（）；
jQuery（“#装备ms整体”）.show（）；
//选项卡活动状态
jQuery（'li'）.removeClass（'active'）；
jQuery（“装备选项卡”）.addClass（“活动”）；
e、 stopImmediatePropagation（）；//停止事件传播
});
}

我们正在使用停止事件向其父级的传播。我希望它对你有用