Question

我需要为woocommerce单一产品页面添加自定义功能。用户需要能够点击简短描述下的图标，然后将其弹出到选项卡部分，并打开相关选项卡。

向下滚动到底部没有问题，但打开相关选项卡我无法弄清楚。我尝试通过URL（http://www.remicorson.com/access-woocommerce-product-tabs-directly-via-url/）访问选项卡，但问题是页面需要重新加载。我能得到的任何帮助都将非常感激。

以下是我正在使用的标签的代码：

function product_icon_set(){

    echo "<div class='info-panel'>
        <div class='learn_more img__wrap'>
            <a href='#description_tab'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_MoreInformation_On.png.png' /></a>
            <p class='img__description'>Desc.</p>   
        </div>
        <div class='specs img__wrap'>
            <a href='#specifications'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Specifications_On.png.png' /></a>
            <p class='img__description'>Specs.</p>  
        </div>
        <div class='dimension img__wrap'>
            <a rel='prettyPhoto' title='My Picture 1' href='https://webdev/rbo/wp-content/uploads/2017/09/ITD1013-Hanging-Hose-Rack-Dimensions.jpg'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Demensions_On.png.png' /></a>
            <p class='img__description'>Dimen.</p>
        </div>
        <div class='product_manual img__wrap'>
            <a href='#tabs_product'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_OpsManual_On.png.png' /></a>
            <p class='img__description'>Manual</p>
        </div>
        <div class='tech_tips img__wrap'>
            <a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Icon_Tech-Tips_On.png-copy.png' /></a>
            <p class='img__description'>Tech Tips</p>
        </div>
        <div class='instal_video img__wrap'>
            <a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Installation_videos.png' /></a>
            <p class='img__description'>Instal.</p>
        </div>
    </div>";

}

回顾一下，用户将单击选项卡，将其带到选项卡部分，然后打开相关选项卡。防爆。单击specs图标，弹出到该部分，然后打开规范选项卡。

Answer 1

我实际上是通过jquery来解决这个问题的。您需要创建一个从当前Li中删除“active”类的函数，然后将其添加到您想要激活的Li（具有正确类的选项卡），然后对内容的相应div ID执行相同操作。这是函数，以及我正在使用的选项卡代码。

function wc_change_tab() {
if( is_product() ) {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {

            // Activate Description Tab
            $('.desc_tab_button').on('click', function () {
                //disable active tab
                $( 'li.active' ).removeClass( 'active' );
                //enable desired tab
                $( 'li.' + 'description' + '_tab' ).addClass( 'active' );

                //disable active tab contents
                $( 'div.active' ).removeClass( 'active' );
                //enable desired tab contents
                $( 'div#' + 'tab-description' ).addClass( 'active' );
              });

            // Activate Specs Tab
            $('.specs_tab_button').on('click', function () {
                //disable active tab
                $( 'li.active' ).removeClass( 'active' );
                //enable desired tab
                $( 'li.' + 'additional_information' + '_tab' ).addClass( 'active' );

                //disable active tab contents
                $( 'div.active' ).removeClass( 'active' );
                //enable desired tab contents
                $( 'div#' + 'tab-additional_information' ).addClass( 'active' );


            /*///// TEMPLATE FOR NEW ICON /// CHANGE OUT CLASS NAMES// Activate Specs Tab
            $('.CHANGE_TO_ICON_CLASS').on('click', function () {
                //disable active tab
                $( 'li.active' ).removeClass( 'active' );
                //enable desired tab
                $( 'li.' + 'CHANGE_TO_TAB_CLASS_NAME' + '_tab' ).addClass( 'active' );

                //disable active tab contents
                $( 'div.active' ).removeClass( 'active' );
                //enable desired tab contents
                $( 'div#' + 'CHANGE_TO_TAB_ID_NAME' ).addClass( 'active' );*/
              });

    });
    </script>
<?php
}

} add_action（'wp_footer'，'wc_change_tab'，26）;

// Icon Set

function product_icon_set（）{

echo "<div class='info-panel'>
    <div class='learn_more img__wrap'>
        <a href='#tabs_product' class='desc_tab_button'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_MoreInformation_On.png.png' /></a>
        <p class='img__description'>Desc.</p>   
    </div>
    <div class='specs img__wrap'>
        <a href='#tabs_product' class='specs_tab_button'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Specifications_On.png.png' /></a>
        <p class='img__description'>Specs.</p>  
    </div>
    <div class='dimension img__wrap'>
        <a rel='prettyPhoto' title='My Picture 1' href='https://webdev/rbo/wp-content/uploads/2017/09/ITD1013-Hanging-Hose-Rack-Dimensions.jpg'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Demensions_On.png.png' /></a>
        <p class='img__description'>Dimen.</p>
    </div>
    <div class='product_manual img__wrap'>
        <a href='#tabs_product'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_OpsManual_On.png.png' /></a>
        <p class='img__description'>Manual</p>
    </div>
    <div class='tech_tips img__wrap'>
        <a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Icon_Tech-Tips_On.png-copy.png' /></a>
        <p class='img__description'>Tech Tips</p>
    </div>
    <div class='instal_video img__wrap'>
        <a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Installation_videos.png' /></a>
        <p class='img__description'>Instal.</p>
    </div>
</div>";

}

从单个产品页面上的单独图标打开Woocommerce选项卡？

1 个答案: