Streaming live at 10am (PST)

How to create a link to a specific tab?

I’ve used webflow tabs to create pages within pages which work great however the client has requested links to each tab, so rather than just directing people to the default tab on the page they can direct people to a specific tab. In other words, instead of giving people this link: they can give people a link to the tab identifier such as

I have had a look at Linking to Specific Tab from another Link or Button however I’m just trying to generate the unique URLs, not a click-to-tab function if that makes sense. So how would I connect the script and the webflow tabs in this scenario? See below…

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(;
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
<!-- TAB MENU --> 
<div class="w-tab-menu w-clearfix tabs-menu" id="tabs-menu">
        <a class="w-tab-link w--current w-inline-block nav-link nav-tabs" data-w-tab="TAB-ID" id="TAB-ID"><div>PAGE TITLE</div></a>
<!-- TAB CONTENT --> 
<div class="w-tab-content tabs-content">
        <div class="w-tab-pane w--tab-active" data-w-tab="TAB-ID">
        <div class="tab-div">
            <h2 class="npt">HEADER</h2>
           <div>BODY CONTENT</div>
1 Like

Did you ever find a solution to this?
I’m trying to do the same…

Hey yes ended up needing to write a bit of javascript, see below

function doChangeTab(){
                    var tabName = window.location.hash.substr(1);
                    console.log('Looking for', '[data-tab-name="'+tabName+'"]');
                    var $tabTrigger = $('[data-tab-name="'+tabName+'"]');

                //when page is first loaded

                //internal page linking

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

Thanks for your help.
G-d Bless

I love this idea, but it doesn’t seem to work anymore? Or maybe it’s just me and my JS skills. I’ve tried anything for the past two days to make this work, but something is missing from the code and I can not figure out what…

@design, Was it intentional to include only part of the code in your post “formated as code” and the other part separately?

no it wasn’t my intention split the code up in that post, so just ignore that! Check out to see it in working order, you should be able to pull the code from that

1 Like

Thank you very much. An example in context is all I needed.
This is the best trick I’ve found on the forum so far this year! Congrats :wink:

1 Like

Thanks very much!! :slight_smile:

Thanks for sharing @design

I am also looking to be able to give each tab on a page a unique url. @design - I had a look at your site, nice work I can see it working. I have tried to copy the script and tried it in the site wide custom code as well as the page specific code of my site but it is not working.

If anyone can offer any help it’d be greatly appreciated.

Here is the published link:
Also the preview link is: (Page name is"The Chalets at Country Resort")

Hey @design I am trying to implement your solution on my website, but I am not able to make it work.

If you can help, here’s the published link:
and here is the preview link on webflow:

If you can show me, explain more in details or even do an example on the link I just shared earlier, you’d be a life saver.



Hi @Ow_Ma,

What exactly you are trying to accomplish? Maybe I could help you.


Hi @sabanna

Thank you for sharing your interest.

I am trying to find a way to change the URL path every time I click on a different tab menu.

-Here’s the published link:

-Here is the preview link on webflow:

The tab menu is on the left and the tab content is on the right. So whenever you click on one of the tab (category) link on the left, the URL path should change to

The closest example I got in this forum is this:

And what I am trying to achieve here is what @design did on his website :

You can see every time you click on different tab links the URL change to its tab name.

So yeah if anyone can assist me with a trick or a solution on how to execute it on webflow, it would be great because this is the last piece that I am trying to solve in order to fully build my client’s project on webflow without exporting the code later and hard code manually the things that I couldn’t do with webflow.



1 Like