[英]Open a Woocommerce tab from a separate icon on the single product page?
我需要向woocommerce單個產品頁面添加自定義功能。 用戶需要能夠在任何簡短描述下均單擊一個圖標,從而將其彈出到選項卡部分,然后打開相關的選項卡。
使其向下滾動到底部沒問題,但是打開相關的選項卡我不知道。 我嘗試通過URL( http://www.remicorson.com/access-woocommerce-product-tabs-direct-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>";
}
回顧一下,用戶將單擊一個選項卡,將其帶到選項卡部分,然后打開相關的選項卡。 例如 單擊規格圖標,彈出到該部分,然后打開規格標簽。
我實際上是通過jquery知道的。 您需要創建一個函數,該函數從當前Li中刪除“活動”類,然后將其添加到要激活的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>";
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.