Links to tabs of another page

Hello,

I am wondering how to link to a tab of another page. Could you please help me with it?

I’d like to link from this page to one of the tab of this page. There should actually be three different links from the pricing table to the three tabs of the second page.

Thanks for your help,
Antoine

1 Like

Hi Antoine,

Please add this code on your CUSTOM JS:

  (function($){
    var tabnav = location.href.split("#tab-").slice(-1)[0];
      if ( tabnav || tabnav != '' ) {    
          $( document ).ready ( function() {
          console.log(tabnav);
          var navbar = $('.x-navbar').outerHeight();
          $('.x-nav-tabs .x-nav-tabs-item').removeClass('active');
          $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').parent('.x-nav-tabs-item').addClass('active');
         $('.x-tab-content .x-tab-pane').removeClass('active');
         $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').addClass('active');

         setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.

           var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;
          console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
          console.log('tab: ' + tabnav + ', yloc: ' + yloc);

              $('html, body').animate({
                  scrollTop: yloc
               }, 850, 'easeInOutExpo');

          }, 750 );

         });
  }
  })(jQuery);

Then to access the specific tab, add #tab-1, #tab-2 or #tab-3 on the link. For example, if we will access tab 2 of this page: https://e-marketingmix.com/referencement-et-contenu-web/abonnement-bulletin-de-sante-seo, the href value of the button from another page would be:

  https://e-marketingmix.com/referencement-et-contenu-web/abonnement-bulletin-de-sante-seo/#tab-2

Hope this helps.

Hi Lely,

Thank you for the code and the explanation. It works just fine with one exception. One it goes on the new page and on the select tab, it scrolls down to this tab but it scrolls too much down, so that you can not see the tab anymore and the beginning of the content of this tab.

How can I solve the problem and makes the scroll down effect stops before the tabs?

Thanks,
Antoine

Hi Antoine,

Look for this line from the code:

var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;

Update to this:

  var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top - 100;

Adjust 100 accodringly.

Thank you very much Lely!

You’re welcome! :slight_smile:

This solution works great thanks! I would like to use it to do a “scroll down” on my homepage to “sec-2” and it be available to use in other ways on the site like this. Can you help me modify this function or tell me how to do a on-click even with the smooth scroll?

Hello There,

Thanks for updating this thread. The code that has been provided is only and specifically be used with tab element. If you want to link to a section, you can simply create a link or insert the href of a menu item as http://example.com/#x-section-2. Assuming that you did not added any section ID. And if you did, you can have a link like this: http://example.com/#elementID. It seems that you are trying to implement one page navigation in your homepage. Please check this out: https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96/1

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.