Overriding default jQuery frontend bookmark from link in another page
I am using jQuery UI (v1.7x) bookmarks on the home page of the site I am currently working on and they are configured like this:
jQuery(document).ready(function($) {
$("#mastheadhome").tabs({
selected:4,
fx: {opacity: 'toggle'}
});
});
Everything works fine when the page loads and the tab that I want to display by default is displayed as it should, however I would like to associate some other tabs with individual pages on the site and of course if I use a hash link (ie "/ # panel1") the "selected" attribute in the above code intercepts it and cancels everything!
I'm 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 thoughts on this!
Alex
Alex,
I changed what you wrote above to work without having to explicitly specify 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 well in my pages. :)
source to share
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 very elegant, but hey, it works!
If anyone can think of a better way, I'd love to hear about it!