Streaming live at 10am (PST)

Linking to a specific tab from a button on another page


#1

Hey all!

This seemed straightforward enough, but I'm running into trouble. Can anyone lend a hand?

This is the tutorial I followed:

I even created a brand new blank project, then I 1) added the script to the custom code footer area, 2) added the classes to the tabs, then 3) added the special URL to the button and still no dice?

Here's the share link for the blank test project:
https://preview.webflow.com/preview/tab-link-test?preview=2394143413fa51c8e995eec2b380252b

Here's a screenshot showing that I named the tab with a class name:

Here's the published URL that's simply a button with the special URL appended to it:
http://tab-link-test.webflow.io/

The button should take you to the 3rd tab, which I named in the
http://tab-link-test.webflow.io/tab-page?tab=tab-three

Am I missing something? Thanks so much!

@PixelGeek


#2

Hey @adiggy

Your code has some errors/omissions. You are calling a function before defining the variable(s) it depends on. Correct code is, sorry for the previous one.

<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>


#3

Yes! That worked! You are amazing, Alex. :slight_smile: Thank you so much for taking the time out to help!


#4

Great to know.

TIP: To avoid styling each and every tab, you could modify the code to look for an ID by changing this line;

$('.' + tabName).triggerHandler('click');

to

$('#' + tabName).triggerHandler('click');

and then adding an ID for each tab.


#5

Ah, that's a better way to do it for sure. Thanks again!

So that full code would be this then (just putting this here for future reference and for others who need it!):

<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>

#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.