Overriding default jQuery UI tab from link on other page

Question

Hi all,

I am using jQuery UI tabs (v1.7x) on the home page of a site I'm working on at the moment, and they are set up as follows:

jQuery(document).ready(function($) {
$("#mastheadhome").tabs({
selected:4,
fx: {opacity: 'toggle'} 
});
});

It's all working great when the page loads, and the tab I want to be displayed by default is displayed as it should be - however, I'd like to link to some of the other tabs from separate pages on the site, and needless to say if I use a hash link (i.e. "/#panel1"), the "selected" attribute in the above code intercepts it and overrides everything!

I was just wondering if there was an easy way to display the default tab (index 4) on the home page on load, but select different tabs via links from other pages?

I look forward to hearing anyone's thoughts on this!

Alex

Answer 1

You could add a querystring option to the page which has the tabs control, and then inject the index into the page serverside :)

Answer 2

Hi Meeh,

Thanks for the suggestion about querystrings - This prompted me to go for the following solution:

jQuery(document).ready(function($) { 

var tabshown = location.hash; 
var index; 
switch(tabshown) { 
case "#panel1": 
index = 0
break; 
case "#panel2": 
index = 1
break; 
default: 
index = 4 } 

$("#mastheadhome").tabs({ selected:index, fx: {opacity: 'toggle'}    

});

});

It's not hugely elegant, but hey, it works!

If anyone can think of a better way, I'd love to hear about it!

Answer 3

Alex,

I modified what you had written above so that it will work without having to explicitly state the expected values (more flexible).

var show_tab = location.hash;
var divs = [];
var index;
$('.tabs > div').each(function() { divs.push('#'+this.id); });
for (i=0; i < divs.length; i++) {
 if (show_tab == divs[i]) {
  index = i;
  break; // found a match, break
 } else {
  index = 0; // default tab
 }
}
$('.tabs').tabs({ selected: index });

Works alright on my pages. :)