単一商品ページの別のアイコンから[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>"; 

} 

要約すると、ユーザーはタブをクリックし、タブセクションにそれらをもたらし、および関連]タブを開きます。 Ex。スペック・アイコンをクリックして、セクションにポップ・ダウンし、仕様タブを開きます。

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

}