How to create a link to a specific tab?

Design help General
1

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: website.com/site-page.php they can give people a link to the tab identifier such as website.com/sitepage.php#tab-id

I have had a look at Linking to Specific Tab from another Link or Button - General - Forum | Webflow 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…

<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>    
            
<!-- 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>
</div>
            
<!-- 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
2

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

3

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+'"]');
                    console.log($tabTrigger.length);
                    if($tabTrigger.length){
                        $tabTrigger.click();
                    }
                }

                //when page is first loaded
				if(window.location.hash){
					doChangeTab()
				}

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

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

Thanks for your help.
G-d Bless

5

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?

6

no it wasn’t my intention split the code up in that post, so just ignore that! Check out The Hawke's Bay A&P Society to see it in working order, you should be able to pull the code from that

1 Like
7

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
8

Thanks very much!! :slight_smile:

9

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 http://showgroundshb.co.nz/ 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: http://mnkniseko.com/the-chalets-at-country-resort
Also the preview link is: (Page name is"The Chalets at Country Resort") https://preview.webflow.com/preview/mnkniseko?preview=2df6ca7b47a6020f9952de506b2b9c0b

10

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: http://oldsinks.webflow.io/
and here is the preview link on webflow: https://preview.webflow.com/preview/oldsinks?preview=64651091fffd8bf57ec31ffe468970f6

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.

Thanks

Cheers

12

Hi @Ow_Ma,

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

Cheers,
Anna

13

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:
http://oldsinks.webflow.io

-Here is the preview link on webflow: https://preview.webflow.com/preview/oldsinks?preview=eea3c4a99561b5452b322ba7f42a5c95

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 oldsinks.webflow.io/tabname.

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 :

Hawke’s Bay A&P Society.

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.

Thanks

Cheers

1 Like