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

Question

我正在 Wordpress here 中开发一个网页，我在其中使用 Jquery 实现选项卡。

当您在图像滚动条中单击给定的缩略图时，它将在正下方的部分中打开相应的选项卡。这工作正常。

我遇到的问题是当您单击实际的选项卡名称时 - 您会看到选项卡的内容无法加载 [Jquery .show() 可能无法正常工作？ ].我的 javascript 功能设置为 hide/show 内容基于相同的 class 无论您单击图像缩略图还是选项卡名称，所以我不确定为什么一个有效而另一个无效'吨。感谢您的任何建议。

下面是我的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(); 来阻止事件传播到其父级。希望对你有用。

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

Implementing tabs with Jquery .click() in Wordpress custom template

javascript

wordpress

jquery

tabs

show