Streaming live at 10am (PST)

Linking to Specific Tab from another Link or Button

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

3 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

I’ve been playing around with this for a few days but can’t seem to get it to work. Hopefully someone can help me spot what the issues is.

I’ve tried adding the code listed above to the page where the button is and also the code section of site settings.

Example page:
Page with button: http://azuzit.webflow.io/category/business-tech
The button is the “All categories” button next to the breadcrumb

This should link to the “tab-categories” class tab but doesn’t and I’m not sure why.
The tab page is located at http://azuzit.webflow.io/articles

Hello! I was trying to implement this feature to build multilanguage CMS website.

I have two separate static pages (projects/работы) and they contain links that lead to a dynamic template page where I created a tab panel with 2 tabs(one of them contain info in english another tab - another language).
Is there a possibility to use this code, cause I cant use the name of the Dynamic Page as link?

here’s preview link https://preview.webflow.com/preview/kitchen-place-ca-test-2?preview=ca225b97ad00ea5e7e0db2836c87459d

THANKS A LOT!!!

↑↑↑ Can anybody help me with this? ↑↑↑

Hi, @vlart!

You can accomplish that by using dynamic embeds.

  1. add embed widget inside dynamic item and insert this snippet:
    <a class="your-class" href="/kitchens/"SLUG"?tab=class-of-tab-link">Open page</a>

“SLUG” is a dynamic field “Slug”
“class-of-tab-link” - class of the tab-link which shows English or Russian collections

  1. Add the script that Dan showed at the comment#6 in this topic :point_up: to the site custom code, before </body> tag

Feel free to ask more if you need more help.

Best regards,
Anna

1 Like

Thank You so mush @sabanna! It’s just awesome!
Love Dynamic Embeds )))

1 Like

This article resolved the issue for me: Link to an anchor & a tab

This is so awesome! Thank you thank you!