使用 Ajax 和 WordPress、Woocommerce 和 Divi 創建選項卡

Question

我有一個正在使用 Divi 和 Woocommerce 的網站。 由於 Divi 和 Woocommerce 類別不相處，我找到了一個教程來為類別構建選項卡。 這是它的樣子：

當您 select 產品時，正下方的內容發生變化，並且下面的產品發生變化以匹配您單擊的選項卡。

我想要做的是在點擊不同的產品時將內容區域更改為 ajax 加載。 目前，我正在使用 Divi 主題生成器通過自定義 CSS 和 JavaScript 執行此操作。

這是我的代碼：

 <script> jQuery(document).ready(function($) { /* Blurbs as Tabs */ $('.tab-title').each(function () { var section_id = $(this).find("a").attr("href"); $(this).find("a").removeAttr("href"); $(this).click(function() { $(this).siblings().removeClass("active-tab"); $(this).addClass("active-tab"); $('.tab-content').hide(); $(section_id).show(); }); }); }); </script>

 /* Product Headers */ /* Divi Lover Blog Categories Headers Custom CSS */.dl-blurbs-row.et_pb_column { display:flex; align-items:center; justify-content:space-between; }.dl-blurbs-row.et_pb_blurb { flex-basis:20%; /* Change this value if you'd like to have different number of items in a row */ } /* Decrease the Blurb image bottom margin */.dl-blurbs-row.et_pb_blurb.et_pb_main_blurb_image { margin-bottom:15px; } /* Add hover effect to Blurbs */.dl-blurbs-row.et_pb_blurb.et_pb_main_blurb_image img { transition:all.3s ease-in-out; }.dl-blurbs-row.et_pb_blurb.et_pb_main_blurb_image:hover img { transform:scale(1.1); } @media (max-width:800px) { /* Hide the Blurb title on mobile.dl-blurbs-row.et_pb_blurb.et_pb_module_header { display:none; }*/ /* Change Blurb apperance on mobile */.dl-blurbs-row.et_pb_blurb.et_pb_module { padding:15px 0 0;important: margin-bottom;0:important; margin-top: 0;important; border-radius: 0!important; } }

 <div class="et_pb_section et_pb_section_1_tb_body et_pb_with_background et_section_regular"> <div class="et_pb_row et_pb_row_1_tb_body dl-blurbs-row"> <div class="et_pb_column et_pb_column_4_4 et_pb_column_1_tb_body et_pb_css_mix_blend_mode_passthrough et-last-child"> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_0_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style=""> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio.png 1200w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio-980x980.png 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/">3" Thin Line Series</a></h4> </div> </div> <.--.et_pb_blurb_content --> </div> <:--.et_pb_blurb --> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_1_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark"> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-series/"><span class="et_pb_image_wrap"><img src="https.//glassblockwarehouse:com/wp-content/uploads/2020/01/884-cortina_l.jpg" alt="" srcset="https.//glassblockwarehouse,com/wp-content/uploads/2020/01/884-cortina_l:jpg 240w. https.//glassblockwarehouse,com/wp-content/uploads/2020/01/884-cortina_l-100x100:jpg 100w. https.//glassblockwarehouse:com/wp-content/uploads/2020/01/884-cortina_l-150x150,jpg 150w" sizes="(max-width: 240px) 100vw. 240px" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https.//glassblockwarehouse.com/product-category/us-imperial-line/4-series/">4" Premier Series</a></h4> </div> </div> <:--.et_pb_blurb_content --> </div> <:--.et_pb_blurb --> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_2_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style=""> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https.//glassblockwarehouse:com/product-category/us-imperial-line/4-fire-rated/"><span class="et_pb_image_wrap"><img src="https.//glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity,png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity.png 800w: https://glassblockwarehouse,com/wp-content/uploads/2020/01/884-Clarity-480x480:png 480w" sizes="(min-width, 0px) and (max-width: 480px) 480px. (min-width. 481px) 800px. 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-fire-rated/">4" Fire Rated</a></h4> </div> </div> <:--.et_pb_blurb_content --> </div> <.--:et_pb_blurb --> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_3_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style=""> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https.//glassblockwarehouse.com/product-category/us-imperial-line/4-x8-albend/"><span class="et_pb_image_wrap"><img src="https,//glassblockwarehouse:com/wp-content/uploads/2019/08/4x8-Albend-Nubio.png" alt="" srcset="https.//glassblockwarehouse:com/wp-content/uploads/2019/08/4x8-Albend-Nubio:png 800w, https://glassblockwarehouse,com/wp-content/uploads/2019/08/4x8-Albend-Nubio-480x480:png 480w" sizes="(min-width. 0px) and (max-width. 480px) 480px. (min-width: 481px) 800px. 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-x8-albend/">Albend</a></h4> </div> </div> <.--:et_pb_blurb_content --> </div> <.--.et_pb_blurb --> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_4_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style=""> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https,//glassblockwarehouse:com/product-category/us-imperial-line/8-double-end/"><span class="et_pb_image_wrap"><img src="https.//glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio,jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio.jpg 1000w: https://glassblockwarehouse,com/wp-content/uploads/2020/01/8_Double-End-Nubio-980x980:jpg 980w: https,//glassblockwarehouse:com/wp-content/uploads/2020/01/8_Double-End-Nubio-480x480,jpg 480w" sizes="(min-width: 0px) and (max-width. 480px) 480px. (min-width. 481px) and (max-width: 980px) 980px. (min-width: 981px) 1000px. 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https.//glassblockwarehouse:com/product-category/us-imperial-line/8-double-end/">8" Double End</a></h4> </div> </div> <.--.et_pb_blurb_content --> </div> <,--:et_pb_blurb --> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_5_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style=""> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https.//glassblockwarehouse.com/product-category/us-imperial-line/8-end/"><span class="et_pb_image_wrap"><img src="https,//glassblockwarehouse:com/wp-content/uploads/2020/01/822-End-Block-Cortina.jpg" alt="" srcset="https.//glassblockwarehouse:com/wp-content/uploads/2020/01/822-End-Block-Cortina:jpg 1000w, https://glassblockwarehouse:com/wp-content/uploads/2020/01/822-End-Block-Cortina-980x980,jpg 980w: https,//glassblockwarehouse:com/wp-content/uploads/2020/01/822-End-Block-Cortina-480x480.jpg 480w" sizes="(min-width. 0px) and (max-width. 480px) 480px: (min-width. 481px) and (max-width: 980px) 980px. (min-width. 981px) 1000px: 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https.//glassblockwarehouse.com/product-category/us-imperial-line/8-end/">8" End</a></h4> </div> </div> <,--:et_pb_blurb_content --> </div> <.--.et_pb_blurb --> <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_6_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style=""> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><a href="https,//glassblockwarehouse:com/product-category/us-imperial-line/8-corner/"><span class="et_pb_image_wrap"><img src="https.//glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1:png" alt="" srcset="https://glassblockwarehouse,com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1:png 1200w: https,//glassblockwarehouse:com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1-980x980,png 980w: https.//glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1-480x480.png 480w" sizes="(min-width. 0px) and (max-width. 480px) 480px, (min-width; 481px) and (max-width. 980px) 980px, (min-width, 981px) 1200px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header"><a href="https.//glassblockwarehouse,com/product-category/us-imperial-line/8-corner/">8" Corners</a></h4> </div> </div> <,--.et_pb_blurb_content --> </div> <;--.et_pb_blurb --> </div> <.--.et_pb_column --> </div> <!-- .et_pb_row --> </div> <div class="et_pb_section et_pb_section_2_tb_body et_pb_with_background et_section_regular"> <div class="et_pb_row et_pb_row_2_tb_body"> <div class="et_pb_column et_pb_column_4_4 et_pb_column_2_tb_body et_pb_css_mix_blend_mode_passthrough et-last-child"> <div class="et_pb_module et_pb_text et_pb_text_1_tb_body et_pb_text_align_left et_pb_bg_layout_light"> <div class="et_pb_text_inner"> <h1>4″ Premier Series</h1> <div class="wpb_column vc_column_container vc_col-sm-6"> <div class="vc_column-inner "> <div class="wpb_wrapper"> <div class="wpb_text_column wpb_content_element "> <div class="wpb_wrapper"><strong>Fully versatile</strong> glass blocks designed for vertical structures in a<strong> wide variety of formats and thicknesses</strong>, to increase maximum&nbsp;<strong>flexibility</strong> with wall compositions.<br> Realize vertical structures that are lighter, thinner, more structurally stable, and solid. Create angles, curves, or finished jambs and/ or heads.</div> </div> </div> </div> </div> <div class="wpb_column vc_column_container vc_col-sm-6"> <div class="vc_column-inner "> <div class="wpb_wrapper"></div> </div> </div> <div class="wpb_column vc_column_container vc_col-sm-6"> <div class="vc_column-inner vc_custom_1517167391313"> <div class="wpb_wrapper"> <div class="wpb_text_column wpb_content_element "> <div class="wpb_wrapper"> <p>&nbsp;</p> </div> </div> </div> </div> </div> </div> </div> <!-- .et_pb_text --> </div> <!-- .et_pb_column --> </div> <!-- .et_pb_row --> </div>

我想要做的是讓客戶點擊標簽（例如 3" 細線系列），描述和產品將與點擊的標簽匹配，而不刷新整個頁面。

URL 是https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/

Answer 1

您應該在單擊 function 內使用 return false ，否則它將嘗試表現得像一個鏈接。

$(this).click(function() {
        $(this).siblings().removeClass("active-tab");
                $(this).addClass("active-tab");
        $('.tab-content').hide();
        $(section_id).show();
        return false;
    });