Solution - creating an URL link for a specific tab

Did you ever find a solution for this?

Iā€™m still wrestling with a similar issue.
I want a bunch of links from a dropdown on the home page to link to the respective tab on another page.
See attached screenshots (e.g. clicking on the ā€œFormsā€ link should link to the ā€œFormsā€ tab/content on the ā€œDashboardā€ page and so on).

I tried different solutions offered here in this forum, like:

Method and code seem essentially the same.

None of them work for me.
The link gets to the right page and section but itā€™s not opening the right tab content. All the links from the dropdown lead to the same tab pane/content.
What is it that Iā€™m doing wrong here?

read-only link: [Webflow - Knicklofts NextGen N1]

Any extra advice for those of us who arenā€™t great with custom code? Iā€™ve renamed my tabs and their respective buttons, but when it comes to the code, it looks like [data-w-tab] is obviously the tab, but how do you target/tell the code which specific button goes to which tab? I assume if I have 4 buttons with 4 tabs (specific services that should go to their respective tab on the services page), I should use this code 4x in the body tag and modify each? Not sure either about the custom name in the URL, because the url is always website.com/services.

read only

Looking to make the services section (second down) go to the respective service tabs on the services page.

Thank you in advance for any help or pointers!

@Sam_Volpe
The custom code should go on the page with the tabs, on the page you are linking from you only need to add the URL (including the tab).

Is there any way to remove the ā€œ#ā€ from the URL in the script?

Is there any way to create link for specific tab inside a tab component (nested tabs)?

The code in the original post at the top of this thread works well.

In case it helps others emma_luna hasnā€™t specifically mentioned that the format of the link then needs to be:
https://www.domain.com/pagename#tabname

And beware:

  1. This is case sensitive!
  2. Spaces in the tab name donā€™t work

No, sorry. Have you since Nov '21?

Possible solve for linking to a direct tab and scrolling to it when the page loads would be to modify the script slightly when you trigger the tab change. Havenā€™t tested it but if itā€™s something people are interested in I can throw together a read only link.

$(function() {
  function changeTab(shouldScroll = false) { // conditional so you can scroll on all tab changes or only the first
    var tabName = window.location.hash.substr(1);
    var tabTarget = $('[data-w-tab="' + tabName + '"]');
    if (tabTarget.length) {
        tabTarget.click();
      if (shouldScroll) {
        /*
          Additional Code for scrolling 
          Assumes your tabs are at the top of your content you want scrolled into view.
        */
        const offset = 72; // arbitrary offset to account for header height if you have a fixed header.
        const duration = 500; // scroll duration in milliseconds
        $(document.body).animate({
          scrollTop: tabTarget.offset().top - offset // position from top of document - offset.
        }, duration);
        /* this could also be used on a div container or whatever your scrolling element is by targeting classname: 
          $('.main-container').animate({ scrollTop: tabTarget.offset().top - offset }, duration);
        */
      }
    }
  }
  jQuery('[data-w-tab]').each(function(){
    var $this = $(this);
    var dataWTabValu = jQuery($this).attr('data-w-tab');
    var pargedDataTab = dataWTabValu.replace(/\s+/g,"-");
    jQuery($this).attr('data-w-tab', pargedDataTab);
  });

  //when page is first loaded
  if (window.location.hash) changeTab(true);

  //internal page linking
  $(window).on('hashchange', () => { changeTab() });

  $('[data-w-tab]').on('click', function(){
      history.pushState({}, '', '#'+$(this).data("w-tab"));
  });
});
2 Likes

Hi~ I used that script as well.

But I have a problem here:
I must set the tab selection default as ā€œnoneā€.
If not, for example, there are 2 tabs with the first one as default, if the URL is /page?tab=first and targets that first tab, the script will kind of ā€œunclickā€ that tab and the result is none.

Does anyone know how to avoid that / how to modify the script?

( That post was closed, so I paste the code by @danro here for easy reference. )

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
1 Like

Hi! Can someone do a short and clear tutorial about how to do this? Iā€™ve tried so many options from other threads, and this one seems to be the most recent one.

From the top main menu, I want to be able to open a tab and scroll to this section. Also, it needs to work from other website pages. I was able to get the tab opening when clicking the link, but when I add the #tomysection in the URL it scrolls but doesnā€™t open the tab anymore.

1 Like

The script will do the tab switching, but because of how anchor links work, ?tab=xxx cannot mix with the use of #section.

Anybody found a solution for the scrolling problem?
I have thrown chatGPT at it for multiple hours now, but even that canā€™t fix this.

1 Like

For those trying to figure out how to combine selecting a specific tab and scrolling to a certain section on the page: I just tried using the same name for the tab and the section ID and it worked for me!

1 Like

Same I tried using Chat GPT too. Tried all its solutions, to no avail. Actually, the code was working fine but all of a sudden, it stopped workingā€¦

If anyone is still looking for a solution, this worked for me after countless retries:

<script>
  var Webflow = Webflow || [];
  Webflow.push(() => {
    function changeTab(shouldScroll = false) {
      const tabName = window.location.hash.substring(1);
      const tabTarget = document.querySelector(`[data-w-tab="${tabName}"]`);

      if (tabTarget) {

        tabTarget.click();

        if (shouldScroll) {
          const offset = 90; // change this to match your fixed header height if you have one
          window.scrollTo({
            top: $(tabTarget).offset().top - offset, behavior: 'smooth'
          });
        }
      }
    }
    
    const tabs = document.querySelectorAll('[data-w-tab]');
    
    tabs.forEach(tab => {
      const dataWTabValue = tab.dataset.wTab;
      const pargedDataTab = dataWTabValue.replace(/\s+/g,"-").toLowerCase();
      tab.dataset.wTab = pargedDataTab;
      tab.addEventListener('click', () => {
        history.pushState({}, '', `#${pargedDataTab}`);
      });
    });
 
  	if (window.location.hash) {
      requestAnimationFrame(() => { changeTab(true); });
    }

    window.addEventListener('hashchange', () => { changeTab() });
  });
</script>
3 Likes

Thanks for this! This should be a standard webflow feature tbh

1 Like

Thank you @emma_luna for starting this thread, and thank you @STiXzoOR for posting that code snippet :point_up::point_up::point_up:. Itā€™s perfect.

I whipped up a quick demo/cloneable project to help summarize + demo what the code can do. https://webflow.com/made-in-webflow/website/simple-tab-link

Screen Shot 2023-06-06 at 1.57.42 PM

2 Likes

Hello!

I have tried using this code to link nav links to tabs partway down a page, and when someone is on a different page, the links work to take them to the destination page and auto scrolls down to the tab. However, when the nav links are used on the destination page itself, the tabs change but it does not auto scroll down. I made no modifications to the Memberstack code that I pasted into my custom code for the page. Did I do something wrong, or is that not how this code is designed to function?

The tabs in question are on the Services page and are in the section that outlines our service offerings which are: Info Meetings, Foundations, Foster Connect, Journey Groups, and Coaching. The links in the nav are under the Services nav item. I would appreciate any help that can be offered!

Here is a read-only link to our site: Webflow - Child Bridge Website V2

1 Like

@Julian_Galluzzo I think this oneā€™s for you, buddy.

1 Like