Solution - creating an URL link for a specific tab

[syamace]

Did you ever find a solution for this?

[Rapha (Raphael Zwyer)]

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:

Linking to Specific Tab from another Link or Button

Hello, is it possible to use regular button to change tabs. So when I click on a button, I want my tab section to change the active tab. Thanks

Linking to a specific tab from a button link

Create individual classes for all your tabs Put the code below into Site Settings > Custom Code > Footer Code: <script> 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, " ")); } var Webflow = Webflow || []; Webflow.push(function () { var tabName = getParam('t…

Solution - creating an URL link for a specific tab

Hi all, I needed a solution for creating an URL link for a specific tab, i found other solutions like Accessing tabs from address bar or Linking to Specific Tab from another Link or Button but i needed a specific separate url for each tab. Then I found this solution How to create a link to a specific tab? , (thanks a lot @design) and improved it a bit because it didn’t work well for me :). So here you have an improved solution: <script> $( function() { function changeTab() { var …

Link to specific tab in a different page inside a specific section

Hello @Naama Can you tell me where I can find the button? I don’t know the language Piter

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]

[Sam_Volpe]

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!

[Gail_Ranger]

@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).

[plu388 (p)]

Is there any way to remove the “#” from the URL in the script?

[Asad1 (Asad Ullah)]

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

[ervinjason]

@e3positivity

For those who have spaces and tab titles with multiple words, this is what I did to replace it with a dash so that the linking still works with the correct parameter. Hope this helps anyone that had the same issue as me:

<script>
$( function() {
    function changeTab() {
        var tabName = window.location.hash.substr(1);
        var tabTarget = $('[data-w-tab="' + tabName + '"]');
        if (tabTarget.length) {
            tabTarget.click();
        }
    }
    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();
    }

    //internal page linking
    $(window).on('hashchange', changeTab);

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

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

[Nathann (Nathan Thomassin)]

No, sorry. Have you since Nov '21?

[milesaylward]

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"));
  });
});

[anthonychan2509 (Anthony C.)]

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>

[Frank_Lamothe]

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.

[anthonychan2509 (Anthony C.)]

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

[icexuick (Martijn Hoppenbrouwer)]

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.

[Caroline-Elisa (Caroline Meyer)]

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!

[AliSaeed]

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…

[STiXzoOR (Neoptolemos Kyriakou)]

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>

[markdrever]

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

[DuncanHamra (from Memberstack)]

Thank you @emma_luna for starting this thread, and thank you @STiXzoOR for posting that code snippet . 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

[nvanoort (Nicholas Van Oort)]

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

[memetican (Michael Wells)]

@Julian_Galluzzo I think this one’s for you, buddy.