Linking to Nested Tabs

Design help Custom code
1

Hi Guys, Im not sure what I’m missing here. I have copied the code before the </body> tag and added my tab classes as indicated ie. tab-kawasaki. The links just do not want to work. Heres the link: http://primrose-motorcycles.webflow.io/new?tab=tab-kawasaki

So the Kawasaki tab is supposed to selected, but nothing.

Here is the project: https://preview.webflow.com/preview/primrose-motorcycles?preview=fc924a3f421baf7e1bbf98381905555c

Any help would be greatly appreciated!

2

Hi @Cloudfusion,

You have to add the class names, that you will use in the links to the tab-link classes

1920×938 801 KB

3

Thank you @Sabanna, but it’s still not working. I have added the Combo Class ‘Kawasaki’ to ‘Tab Link’ so it reads Tab Link Kawasaki and used this suffix to the main url /new?tab=tab-Kawasaki, but it still defaults to the first Tab.

4

You should use exactly samr class name when you create the link to specific tab.
It means that if you are using class “Kawasaki” in the Tab-links, then linking to this tab will look like this
/new?tab=kawasaki

Do not use “tab-” part.

5

Hi @sananna, Ok, this seems to work nicely now (all needs to be lowercase), but I guess my case is a bit more complicated. I have nested tabs, so the first set of tabs can be activated without a problem, but the second set of tabs (nested) can only be activated with the method above when they are within the current active tab. I’m unable to activate the nested tabs when they are outside of the current active tab. I hope i’m making sense.

7

I am not sure it is possible. But maybe @samliew know some workaround

8

What do you mean?

You want to activate kawasaki and kawasakiroad together like this?

http://primrose-motorcycles.webflow.io/new?tab=kawasaki&subtab=kawasakiroad

9

Hi @samliew Yes! Exactly! Any idea how this can be accomplished? The link you gave does not work, but yes, I guess it will look something like that.

10

Hi @samliew, have you perhaps found a solution to this? :slight_smile: Thanx!

11

I see that you already have this:

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, " "));
  }
});

Change it to this:

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, " "));
}
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  var subTabName = getParam('subtab');
  if (tabName) $('.' + tabName).trigger('click');
  if (subTabName) $('.' + subTabName).trigger('click');
});
1 Like
12

Samliev, this does not work? The one above works in Chrome, but not in Firefox!

http://www.boetje3.nl/projecten
I want to click on on of the images to get to the right a tab! (tabs are left)

These 4 images are in a tabfield already, maybe is that the problem?

design link:
https://preview.webflow.com/preview/gallerie?preview=572a8320a22870b39aac0cd12b0e90ca

For Dave:
http://quick.as/Aew4Hm4Xz

13

Your script is not contained within <script></script> tag block.

14

Thats him Sam… what i said… no programmer…
thanks man!