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:


#10

Hi Aaron,
This was working and I added another tab and now after rigorous testing, I notice they don’t all link to the correct tab. I’ve spent some time looking at this and can’t see why… all the combi-classes are set and are linked to their respective letters on the homepage. Any ideas why this is not working?

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


#11

Hello @Bammedia

I noticed that your tabs don’t have the proper combo class added:

If you add the correct combo class you’re good to go.


#12

Yes! thank you, I was honing in on the Gallery Tab pane’s and their combi-classes and not the tab links. I’ve adjusted these now and it looks good… thanks again, more coffee needed! :sleeping:


#13

Can I ask, does this need to have the w–tab-active webflow class set on one of the tabs windows, to work? This works fine on my Webflow staging domain, however still having trouble with my live domain.
If I leave the tabbed windows without at least one having this webflow class: (w–tab-active) the tabs won’t open on click (as it is now), however if I say place this class on Kitchens, every other letter links to kitchens then?

http://www.granddesigns.ie/index.php >>> LIVE
http://grand-designs-kitchens-bedrooms.webflow.io/galleries?tab=refurb-window >> TEST


#14

Is there anything else script wise in the head or footer to make these tabbed windows open?
Using your solution on test page exported direct from Webflow, it still works: i.e. the window with images in it opens on load.

http://www.granddesigns.ie/galleries2.html?tab=kitchen-window

However, using like-for-like code from the exported Webflow, when the live site loads it doesn’t automatically open the window:
http://www.granddesigns.ie/galleries.php?tab=kitchen-window

Please help! :frowning:

I should mention that the script that you originally suggested, is present in a Global Header file on the live site, so it should be read.


#15

Self Resolved by mesing about with JS linking in global footer!