使用 Ajax 和 WordPress、Woocommerce 和 Divi 创建选项卡

Question

I have a website I am working on using Divi and Woocommerce. Since Divi and Woocommerce Categories don't get along, I found a tutorial to build out tabs for categories. This is what it looks like:

When you select the product, the content directly under changes, and the the products below that change to match the tab you clicked on.

What I want to do is change the content area's to ajax loading when a different product is clicked. Currently, I am using the Divi Theme Builder to do this with Custom CSS and JavaScript.

Here is my code:

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

What I want to do is have the customer click on the tab (for example 3" Thin Line Series) and the description and products will match the clicked on tab without refreshing the whole page.

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

Answer 1

You should use an return false inside the click function otherwise it will try to behave like an link.

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