Set URL from Tab Change

Link to specific tabs using URL parameters by setting tab URLs in Webflow. This script allows you to set the tab name in the elements panel for the tabs that you want the URL to include for each tab. The URL will use the # parameter, for example something like example.com#tabName where tabName is the element ID you set on the tab. This allows you to link to specific tabs from other pages and have more control over the tab experience.

How to add it

1. Add the Javascript to the closing body tag of your custom code page settings
2. Add an element ID for each tab that you'd like to link to

The code

                      <script>
$(function() {

	function doChangeTab(){

		var tabName = window.location.hash.substr(1);
		var $tabTrigger = $('[data-tab-name="'+tabName+'"]');

		if($tabTrigger.length){
			$tabTrigger.click();
		}
   }

   //when page is first loaded
	if(window.location.hash){
		doChangeTab()
	}

  //internal page linking
	$(window).on('hashchange',doChangeTab);

	$('[data-w-tab]').on('click', function(){
		history.pushState({}, '', '#'+$(this).data("tabName"));
	});

});
</script>