Can I set up a Webflow landing page with buttons that, when clicked, open a different page with a specific tab already open? Do I need to write code for this, and if so, could you provide a tip?
TL;DR
- Add URL hashes (e.g.,
/page#tab-name) to your landing page buttons to target specific tabs. - On the destination page, use JavaScript to detect the hash and programmatically click the matching tab link using ID or
data-w-tab.
Yes, you can set up buttons on a Webflow landing page that open another page with a specific tab selected, and this requires just a small amount of custom code.
1. Use URL Hashes to Target Tabs
- Webflow tabs can be opened via URL hashes (e.g.,
#tab-2) if configured correctly. - Each tab has a unique
IDWebflow auto-generates based on the tab link name, or use the Webflow Designer to manually set link IDs.
2. Set Up Buttons with Link URLs
- On your landing page, set the button’s link to the target page including the tab’s URL hash — for example:
/pricing#tab-2
- Make sure the tab on the destination page uses the matching
ID(e.g.,tab-2).
3. Add Custom Code to Read the Hash and Activate the Tab
- Webflow tabs don’t natively auto-select based on URL hash, so you’ll need simple custom JavaScript.
- Here’s a tip: place this code in an Embed element or inside Page Settings > Before </body> tag in the destination page:
JavaScript Tip:
- Wait for the DOM
- Extract the hash from the URL
- Click the matching tab link (by
#idordata-w-tab)
Example (simplified):
- Use:
document.querySelector("a[href='" + window.location.hash + "']").click();
4. Match Tab Link IDs or Data Attributes
- If you’re targeting via
#tab-name, ensure your tab link (not just the tab pane) in Webflow has the same ID:
Select the tab link, go to Settings, and set ID = tab-2, etc.
- Alternatively, use the built-in
data-w-tabattribute to match the anchor.
Summary
You can open a specific tab on another Webflow page using links with hashes (like /page#tab-name) combined with a short JavaScript snippet that activates the tab on page load. Set matching IDs or data-w-tab attributes and trigger the correct tab link via script.