Menu icon Foundation
Solution for deep linking tabs F5

In foundation.tab.js:

After preventDefault(), add this line to add hash back in the URL, and suffix hash with / so that document doesn't jump down to anchor

document.location.hash = this.href.split('#')[1]+'/';

In app.js, or wherever your custom script resides:

Add this block of code to openTab based on hash change

function openTab() {
    if(window.location.hash){
    	$('dl.tabs dd a').each(function(){
			var hash = '#' + $(this).attr('href').split('#')[1] + "/";
			if(hash == window.location.hash){
				$(this).click();
			}
		});        
	} else {
		// open the first tab by default
        $('dl.tabs dd:first-child a').click();
	}
}        
		
$(window).bind('hashchange', function() {
	openTab();
});
		
openTab();
            

         

Note: be sure to call foundation.tab.js somewhere after foundation.min.js

Cheers!

deep linkingtabsFoundation 5

In foundation.tab.js:

After preventDefault(), add this line to add hash back in the URL, and suffix hash with / so that document doesn't jump down to anchor

document.location.hash = this.href.split('#')[1]+'/';

In app.js, or wherever your custom script resides:

Add this block of code to openTab based on hash change

function openTab() {
    if(window.location.hash){
    	$('dl.tabs dd a').each(function(){
			var hash = '#' + $(this).attr('href').split('#')[1] + "/";
			if(hash == window.location.hash){
				$(this).click();
			}
		});        
	} else {
		// open the first tab by default
        $('dl.tabs dd:first-child a').click();
	}
}        
		
$(window).bind('hashchange', function() {
	openTab();
});
		
openTab();
            

         

Note: be sure to call foundation.tab.js somewhere after foundation.min.js

Cheers!

Rafi Benkual almost 6 years ago

Hi Lannie,
Thanks for posting this! We'll try it out!

Teague Camarigg almost 3 years ago

For those who have not updated to F6 this may help as well.

We use jquery v220 and experienced this error when deep linking:

Uncaught Error: Syntax error, unrecognized expression: [data-tab] > * > a[href=#report]

 

We learned it was because jquery needed to interpret the # as a literal in order to work with the foundation code.

 

After testing a few things, here is our modification that fixed it (Foundation v5.5.3):

Go to foundation.tab.js

On lines 105,111,117 make the corresponding changes:

Simply add the literal slashes before the hash value for the href

 

if (hash_element.hasClass('content') && hash_element.parent().hasClass('tabs-content')) {
    // Tab content div
    self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=\\' + hash + ']').parent());
}



if (hash_tab_container_id != undefined) {
    self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=\\#' + hash_tab_container_id + ']').parent(), hash);
}



for (var ind = 0; ind < self.default_tab_hashes.length; ind++) {
    self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=\\' + self.default_tab_hashes[ind] + ']').parent());
}

 

This worked for us, your context may be different but it is simple enough to try.