Webflow sync, pageviews & more.
NEW

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
  • Assign unique IDs to each tab on the target page and link buttons to that page using the corresponding hash (e.g., /services#tab2).
  • Add custom code to the destination page that reads the URL hash on load and triggers a click on the matching tab link to activate it.

Yes, you can configure Webflow buttons to open a different page with a specific tab active. This does require a small amount of custom code, but it's a simple and common practice.

  • On the target page that has tabs, select each tab pane or tab link.
  • In the Element Settings Panel, set a unique ID for each tab pane, like tab1, tab2, etc.
  • These IDs will be used in the URL link (e.g., /services#tab2).
  • On your landing page, add buttons or links.
  • Set their Link setting to go to the destination page using the tab ID as a hash anchor — for example:
    /services#tab2
    This tells the browser to load that page and jump to the ID called tab2.

3. Add custom code to auto-activate the correct tab

Webflow's native tabs won't auto-switch based solely on a hash in the URL, so you need to add a small script to the tab page to activate the tab based on the URL fragment.

Tip: Add this code to the Page Settings → Before tag of the destination page:

  • The script should:
  • Read window.location.hash
  • Trigger a click on the corresponding tab link (not the tab panel)

A typical script structure would look like this:

  • On page load, check the hash (like #tab2)
  • Find the tab link (not the content pane) that targets that tab
  • Trigger .click() on it

If you need help structuring this snippet specifically, let me know which tab names or classes you're using.

4. Naming conventions for selectors (Webflow-specific)

  • By default, Webflow assigns tab links with class names like w--tab-link.
  • Make sure your tab links (not the panes) have identifying attributes or consistent class names so your script can target them.

Summary

You can set up a Webflow button to open a different page with a specific tab active by linking to that page with a hash (e.g., #tab2) and adding a small script on the destination page to detect and activate the corresponding tab. This requires minimal code and works well for tabbed navigation.

Rate this answer

Other Webflow Questions