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
Matzinger
(Studio Digital)
September 18, 2019, 10:44pm
2
turn it around ?tab=tab_1#section_name
You will need costum code on your site with the tabs
<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
Matzinger
(Studio Digital)
September 18, 2019, 10:45pm
3
“tab” is the class of the webflow-element Tabs
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.
Matzinger
(Studio Digital)
September 19, 2019, 6:14am
5
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