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

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

} 

总括来说，用户会点击一个标签，是他们带来的标签部分，并打开相关选项卡。防爆。单击规格图标，向下弹出到该部分，然后打开规格选项卡。

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 

功能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>"; 

}