How to link to a specific tab in Webflow?

1. Add the Script

‍Include this script before the closing </body> tag on the page with your tabs:

<script>
//Tab Change
$(function() {
  function changeTab(shouldScroll = false) { 
    var tabName = window.location.hash.substr(1);
    var tabTarget = $('[data-w-tab="' + tabName + '"]'); // This is the tab button
    var tabContent = $('.w-tab-content [data-w-tab="' + tabName + '"]'); // This is the tab content

    if (tabTarget.length) {
      tabTarget.click(); // Open the correct tab

      if (shouldScroll) {
        setTimeout(function () { // Delay to allow tab switch
          if (tabContent.length) {
            const offset = 100; // Adjust for fixed headers
            const duration = 800; // Smoother animation
            $('html, body').animate({
              scrollTop: tabContent.offset().top - offset
            }, duration, 'swing'); // Uses jQuery's built-in easing
          }
        }, 150); // Delay ensures tab content is visible before scrolling
      }
    }
  }

  // Fix spaces in `data-w-tab` (if needed)
  $('[data-w-tab]').each(function() {
    var $this = $(this);
    var dataWTabValu = $this.attr('data-w-tab');
    var parsedDataTab = dataWTabValu.replace(/\s+/g, "-");
    $this.attr('data-w-tab', parsedDataTab);
  });

  // When page loads, activate correct tab
  if (window.location.hash) changeTab(true);

  // Listen for hash changes (when clicking a link)
  $(window).on('hashchange', function () {
    changeTab(true);
  });

  // Ensure clicking a tab updates the URL
  $('[data-w-tab]').on('click', function() {
    history.pushState({}, '', '#' + $(this).data("w-tab"));
  });
});


</script>

2. Set Your data-w-tab Values

Make sure each tab button has a data-w-tab attribute that exactly matches the name you’ll use in the URL (spaces replaced by hyphens). For example, if your tab label is “Tab 4,” set data-w-tab="Tab-4".

3. Link Directly to a Tab

Use a URL with the hash matching your data-w-tab. For example:

https://yoursite.com/solutions#Tab-4

When a visitor opens that URL, the script will:

• Read #Tab-4 from the address bar
• Click the “Tab 4” button automatically
• Scroll smoothly to that tab’s content (adjusting for any fixed header)

Now any link pointing to #Tab-4 will open and scroll to that tab on page load or when clicked.