Question About URLs - Jump to Certain Section & Tab(s)

Hi all, I’m in a bit of a pickle with URLs.

To jump to a certain section on page-load, you would do: www.example.com/pagename#section_name

And to focus/open a certain tab on page-load, you would do: www.example.com/pagename?tab=tab_1

However, if you do: www.example.com/pagename#section_name?tab=tab_1 , this does NOT work

So, does anybody know how to jump to a certain section AND focus a certain tab (all in the 1 URL)?

This URL will ultimately be placed inside a button. So when the user clicks the button on the homepage, it loads a subpage (on a certain section midway down the page, and ensures the correct tab is focused within this section, depending upon which button was pressed on the homepage by the user).

Thanks in advance,
Oli

turn it around ?tab=tab_1#section_name :wink:

You will need costum code on your site with the tabs :wink:

<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

“tab” is the class of the webflow-element Tabs

2019-09-19%2000_45_03-Webflow%20-%20TESTAREA

Hi there, thanks for replying.

I have added that custom code into my page and changed (‘tab’) to (‘tabs’), which is what they are called on my project site.

However, this has not worked. Even when switching the url around.

Here you can clone my site: https://webflow.com/website/testarea

1 Like

Thank you so much for doing that. I really appreciate it.

I have basically followed all the same steps as you on your site. But for the life of me, I can’t get it working on my client’s site.

I have named the class of my tab element “tab” (see pic below)

And I have placed the custom code inside the head tag of the page that the tabs are on (pic below)

And I’m using the URL in the format of:

www.websitename.com/subpage?tab=tab1#section

Any help you could give me would be massively appreciated, thank you so much

Best Wishes,
Oli