Can a TAB link scroll to a page section ID?

[tws (Brent)]

I have inserted a “Tabs” component, with 5 tab links. 3 of the tabs will have content, but I would like the other 2 tabs to link scroll to separate sections of the same page.

The first, third, and fourth tabs have content, but the second and fifth tabs will (hopefully!) scroll to different page sections.

Unfortunately, the “Tab Link Settings” doesn’t offer “Link Settings”…

…like the “Nav Link Settings” does.

I understand why, since tabs are meant to contain the content within themselves.

However, I’m wondering if there is any code that would make a tab link scroll to a separate section. I was thinking the “Custom Attributes” might be the answer, but I searched high and low and came up with nothing.

If anyone has any ideas, that would be amazing.

Thanks!

P.S. I tried using a navbar (which will link to section ID’s), but there were too many issues with the current tab state working/not working, as this is not a good application for the navbar.

[Siton_Systems (Ezra Siton)]

No (Tabs is for changeable content not for anchors - you cannot mix this together - also from User experience this is little not friendly)

The most basic solution is next to the tab menu - put 2 more buttons with the same style and look and thats it (Also not perfect because the active state will not change for button 4-5).

Thats it Another way is to destroy the core-tabs by custom code (add “href="some-value” by code).
Google it:
https://stackoverflow.com/questions/4345427/setting-href-attribute-at-runtime

Custom code in head and body tags | Webflow University

** will work only on the publish site

Summary: The best solution is to change the layout - structure

[tws (Brent)]

Thanks so much for taking the time to share this information! I’m not a developer so this code is a bit beyond my knowledge, but I will definitely give it a try.

I thought that maybe I could add <a href="#Vids-Pics"></a> to the tab link’s “Custom Attributes”…

…but Webflow doesn’t allow the href tag…

Anyway, thanks again.

[saroukhs (s)]

1. Click on the “page” button,next to the webflow logo on the top left menu.

2. Hover your mouse on the page where you have your tablinks, click on the “Edit page details”, this is the settings icon.

3. Roll your mouse to the last menu , “before tag”.

4. You need to add a java script code that goes like this:

<script?
$(document).ready(function() {

$(“#TabLinkID”).attr(“href”,“LinkToAdd”);

$(“#AnotherTabLinkID”).attr(“href”, “AnotherLinkToAdd”);

});

PS: basically if you have the script and the document ready lines add the middle two line on your code.

Guys this is the first time i contribute any suggestions are welcome.

Cheers