Linking to Specific Tab from another Link or Button

I’ve used both the above scripts before, though the first doesn’t add the href to the URL and the second script reloads the page. Be great to have a way to link to a tab on the same page in the same way that we can currently link to a section – this way browser navigation would be maintained.

Could this be added to Webflow natively?

can you just add this please to webflow - the whole point of using webflow is so you dont have to mess about playing with custom code and JS.

Tabs should not have been added until they were tested fully and links are pretty basic stuff. Come on Guys - especially since this thread is a year old!!!

1 Like

Hi @macman, thanks for the post. You are absolutely right, the vision of Webflow is to produce great sites without having to code. As improvements to features are identified, we take that into the planning for future updates.

The custom code is useful now as a workaround until we have the requested behaviors updated into the tool :smile:

Cheers,
Dave

1 Like

I moved 2 posts to a new topic: Trouble with linking to a specific tab

Hi Danro,

I know you’ve probably got this question alot but would it be possible to help me implement this code into my site I having trouble with the example you provided.

Thanks in advance

2 posts were split to a new topic: Trouble with linking to tabs on site

Hi @cyberdave and @danro,

Is there any updates on this feature? Would like to have an idea as if this would be arriving anytime soon or not. Want to know if I should wait for it or use another solution.

Thanks in advance.

Cheers.

Can someone explain how to use the code above to link to a tab but also an id? Right now the code works fine but the form i’m using it on is large (why its split into tabs), so when you click through it takes you to the tab as expected just to the same point on the page and I need it to go to the top of the form.

You can see the from here, http://staging.nuraven.com/frachtanfrage

Hi there,

I’ve been using this technique and it’s so useful on many of my sites.

What I’d like to do now is have a link in my Nav Bar take me to a Section on my page and open a specific tab in a Tab Menu also.

I’ve tried linking it with the anchor #contact?tab=nurses-tab

But it’s not worked. Any suggestions?

BS"D
Hi. I’m trying to implement by following the thread, and I seem to have worked most of it out.
I have a link (currently at the top of the index page for test purposes) that I takes me to the Artist page and it actually goes to the right tab, yet instead of going to the tabs element (which is down the page) it goes to the top of the page. How can I have the link take me directly to the tabs section of the Artist page?
Thanks
Yoram

Share Site:
https://preview.webflow.com/preview/dritamarraz?preview=667f7f2d7b1708255b5bf73789359675

Hey everyone,

So I’ve got the code before the </body> but it doesn’t seem to be working.

http://lifepoints-fresh-site.webflow.io/

The only button I’ve tried this on so far is the ‘Learn More’ under the ‘Experience’ section.

Seems to just be linked to the ‘About’ page and not to the ‘Experience’ tab on the About page.

Don’t know what I’m doing wrong.

Thanks to anyone who’ll help me out!
Nicco

@cyberdave @brryant
Can’t you guys at Webflow make this “small great feature”?
It seems its not a lot of work for you guys, but for a lot of us…
its to difficult to code i am totaly not a code man…
The time that i could make this… would properly be the same time as one of your team member makes this!

3 Likes

OK, i have to give it a try… because i see no other option!
my questions:
Do i place this in the custom code “overall” or in the customcode in te page, or targeting page?

Other question,
What do i have to change in this code?
my tabnames are “tab-kantoor”, “tab-flexplek” and “tab-vergadering”
my targetingpage is: /flexwerkplek

Hope that enyone can help, much appreciated

My site:
Website link
Klik ok RESERVEER for the TABS…

My site in the designer:
https://preview.webflow.com/preview/pandraak?preview=[object Object]

Hello @Koen,

You don’t have to change anything in this code snippet, just paste it into the custom code area Before </body> tag. Dont forget to wrap it with <script></script> tags.

Next step is set correct links to your tabs. For that you will need to add CLASS NAMES to the tab-links. It can be combo classes. I usually give the specific class names, which “sound” the same as tabnames. So “tab-kantoor”, “tab-flexplek” and “tab-vergadering” should become also combo classes for TAB-LINKS.

Then links to particular tab will look like this: /page_name?tab=tab_class
In your case it would be: /flexwerkplek?tab=tab-kantoor

Hope it helps,
Anna

5 Likes

Many Many thanks Sabanna!! it works!!!

1 Like

7 posts were split to a new topic: Linking to Nested Tabs

Hi.

I try to make my home page link blocks to link right tabs in my portfolio page. I copied that code to before body section of my home page settings as it is. I wasn’t suppose to change anything in it? Then I wrote in ‘videos’ link block url: http://samutyrvainen.com/portfolio?tab=videos and in ‘graphic design’ link block url: http://samutyrvainen.com/portfolio?tab=graphicdesign. Those ‘videos’ and ‘graphic design’ are names of the classes of the tabs in portfolio page. But when I published and clicked links they go to portfolio page but always to the default tab. I wonder what I’m doing wrong…?

https://preview.webflow.com/preview/samutyrvainencom?preview=22348feb08c23c96bc5a8a424bb5d4b8

http://www.samutyrvainen.com

– Samu

Hello, @samutyrvainen

Let me help you.

That videos and graphicdesign it should be classes of TAB LINKS, not tabs itself.

Hope it helps.

Cheers,
Anna

Hi!

So now I named the class of the tab button (same which you click on the page to choose the tab) as pf-tab-link-graphicdesign, and wrote url: http://samutyrvainen.com/portfolio?tab=pf-tab-link-graphicdesign in the corresponding link block at the home page, but it still goes just to the portfolio page, not to the right tab. Hmmm…

– Samu

Oh, I had inserted the script in my home page instead of the portfolio page. Now my links work beautifully. Thanks Anna.

– Samu

1 Like