How can I create separate URL links for each tab in Webflow?

To create separate URL links for each tab in Webflow, you'll need to create a system that updates the URL when a tab is selected and lets users open a tab directly via a unique URL.

1. Assign Unique IDs to Tabs

• Give each tab pane a unique ID in the Webflow Designer.
• Select the Tab Pane, go to the Settings Panel, and set the ID (e.g., "tab-1", "tab-2").

2. Set Tab Links with URL Hashes

• Copy your page URL (e.g., yourdomain.com/services) and add a hash for each tab pane ID.
• Example URLs:
  • yourdomain.com/services#tab-1
  • yourdomain.com/services#tab-2

3. Add JavaScript to Activate Tabs Based on URL

Webflow's native Tabs component doesn’t automatically open tabs from a hash. You must use custom JavaScript to trigger the correct tab when the page loads.

• Go to Page Settings > Before tag and add this JavaScript:

<script>  window.addEventListener("DOMContentLoaded", function () {    const hash = window.location.hash;    if (hash) {      const tabLink = document.querySelector(`a[href="${hash}"]`);      if (tabLink) {        tabLink.click();      }    }    const tabLinks = document.querySelectorAll('.w-tab-link');    tabLinks.forEach(function (tab) {      tab.addEventListener('click', function () {        const target = tab.getAttribute('href');        history.replaceState(null, null, target);      });    });  });</script>

• This script:
• Activates the correct tab on page load using the URL hash.
• Updates the URL hash when users click on a tab.

4. Test Each Tab Link

• Publish your site and visit links like yourdomain.com/services#tab-2.
• Confirm the correct tab opens.
• Clicking tabs should also update the browser’s address bar automatically.

Summary

To enable separate URLs for each tab in Webflow, assign unique IDs to tab panes, generate hash-based links, and use JavaScript to open the corresponding tab on page load and update the URL when tabs are clicked.