從單個產品頁面的單獨圖標打開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>"; 

}