Linking to Specific Tab from another Link or Button

Design help General
6

@Busayo_Kupoluyi

Selecting the tab on another page would require a custom URL parameter. Here’s an example script that you can append to the </body> code section:

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

Once in place, you would then need to link to your page with a custom url:

/contact?tab=target-tab-link for a ‘contact’ page
/?tab=target-tab-link for the home page

Note: This will only work once the page is published or exported. (not in preview mode)

Hope that helps!

18 Likes