Streaming live at 10am (PST)

Links to individual tabbed menu


#1

https://preview.webflow.com/preview/grand-designs-kitchens-bathrooms?preview=a99819e5b4b25a4eb6490ca9fbfa684d

I know this probably needs some JS, but can anyone assist me in linking the 3 big letter links on the home page to their specific tabbed window within the galleries page.
I have given each of the windows their own unique IDs but would appreciate some guidance on how I can link each of the 3?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hello @Bammedia

There’s a way to do this without custom code, the downside about this is that it only works on the published site and not the preview mode.

  1. Give a different combo class to each one of your tabs so you can target them later.
  2. In your home page links go to the element settings tab
  3. In the link settings select URL and type /galleries?tab='desire-combo-class'
  4. Change ‘desire-combo-class’ for each one of your combo classes.
  5. Publish your site and test it in the published site.

#3

Hi Aaron,
Thanks for your assistance. I tried placing individual combo-classes on each of the tabbed links and then just called the combo classes in the URL link, but it’s still just landing on the default window.
/galleries?tab=‘kitchen-window’

I’m assuming that it’s the tabbed link that needs the combo class as opposed to the tabbed pane?
Also, is it just the combo class that needs to be called or does it require the parent class?


#4

Hello @Bammedia

I’m sorry I mentioned that this would work without JS but actually it needs some custom code

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

Add this code in the Head code and you’re good to go.

Yes it is the tab link.

Just the combo class.

Try with the code I sent and let me know if it works.


#5

Thanks a mill, now my Javascript ain’t up to scratch! ;(
Do I just replace the Combo class where it says if (tabName) and do I need to do this for each of the 3 combo classes? i.e. ‘kitchen-window’, 'bathroom-window, ‘refurb-window’

Thanks in advance.


#6

No, just copy the whole code and into the Head custom code of your site and that’s it.


#7

Hi,

Nope that doesn’t work! Check out my public link:
http://grand-designs-kitchens-bathrooms.webflow.io/


#8

Oh I see the issue

Don’t use the ‘’ for the combo class in the link, just like this: /galleries?tab=desire-combo-class


#9

That worked! Thank you so much for your patience… :slight_smile:
Excellent community asset. :+1: