data-tab
to the target Tab Link./page-2#section-id?tab=2
, and add custom JavaScript on Page 2 to read the tab
parameter and trigger the corresponding tab.To link a button on Page 1 to a specific tab on Page 2, and automatically scroll to the tab section, you’ll use URL parameters and anchor links combined with custom interaction triggers in Webflow.
#pricing-tabs
).tab2-link
, or the Tab Panel a tab2-panel-id
, depending on how you want to trigger it.On Page 1, select your Button.
Set the Link to the following format, combining the page path, anchor, and a custom parameter:
/page-2#pricing-tabs?tab=2
#pricing-tabs
is the section ID (for scrolling).
?tab=2
is a custom query parameter you’ll use to trigger the correct tab.
Go to Page Settings of Page 2.
In the Before
tag custom code section, add a script that:
Checks the tab
parameter in the URL.
Triggers a click on the corresponding Tab Link.
Example (remove any HTML tags):
```
```
Replace "${tabValue}"
with the appropriate value matching the tab’s data-tab attribute (Webflow assigns these by default).
Make sure Tab Links have corresponding data-tab
attributes.
Link a button from Page 1 to a specific tab on Page 2 by using an anchor ID and a URL parameter, then use custom code on Page 2 to trigger a tab switch via that parameter. This ensures proper scroll positioning and tab activation on page load.