Support » Plugin: Product Tabs Manager for WooCommerce » Put anchor in tab and click link to switch to each tab

  • Resolved 温唯

    (@unbosomjam)


    Hi,
    Thanks for such great plugin.

    I’d like to ask if there is a way(css or code) to put an anchor in tab content,then set a link to that anchor , and when I click on the link in product description area or other tab , it will scroll or switch to the specific tab ?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author RazyRx

    (@razyrx)

    Hello,

    Our plugin only manage list of tabs, but how it works and looks on the page is depend on your theme.

    Regards,
    Oleg

    Thread Starter 温唯

    (@unbosomjam)

    hi @razyrx

    Thanks for taking time replying.

    I’ve created tabs with “Product Tabs Manager for WooCommerce plugin” , it works and looks well.

    What I want to do is when I click on a link in description area,it will auto switch to specific tab,like this screenshot:
    https://upload.cc/i1/2020/10/13/fN1dvn.png

    Is there any code(css/js or others) to do it?

    Plugin Author RazyRx

    (@razyrx)

    Hello,

    As I said before it is depend on your theme.
    For example you can use JavaScript code to click on tab button.

    Regards,
    Oleg

    Thread Starter 温唯

    (@unbosomjam)

    I’ve find these JS code below:

    const tabOpener = function(tab) {
        // Simulate a click on that tab.
       if ( typeof tab === 'string') {
           const currentTab = jQuery( '.' + tab + '_tab' );
            currentTab.children('a').click()
       }
    
        // Scroll to that tab.
        jQuery('html, body').animate({
    	    scrollTop: jQuery( '#tab-' + tab ).offset().top
        }, 300);
    }
    
    jQuery(document).ready(function($) {
        const { hash } = window.location;
        let tab;
    
        // If a # exists in the url lets see if its a tab.
        if ( hash ) {
            tab = hash.replace('#', '');
    	    return tabOpener( tab );
        }
    
        // On click we'll check to see if the event target has a tab hash.
        $('body').on('click', function(e) {
    
            if ( e.target.hash && ! e.target.hash.includes('#tab') ) {
                tab = e.target.hash.replace('#', '');
                 return tabOpener( tab );
            }
        });
    });

    And it works well.
    Hope can help others.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Put anchor in tab and click link to switch to each tab’ is closed to new replies.