Skip to content

Instantly share code, notes, and snippets.

@henrik
Created September 10, 2009 14:59
Show Gist options
  • Save henrik/184591 to your computer and use it in GitHub Desktop.
Save henrik/184591 to your computer and use it in GitHub Desktop.
// Make jQuery UI tabs pick the selected tab from the URL hash,
// and set the selected tab id as the hash.
//
// By Henrik Nyh <http://henrik.nyh.se> 2009-09-10 under the MIT License.
// Based on code by Mark Yoon: http://articles.rootsmith.ca/mod_python/how-to-make-jquery-ui-tabs-linkable-or-bookmarkable#comment-10188
$('#foo').tabs();
$('.tabs').each(function() {
// Pick selected tab from hash
var $tabset = $(this);
var index = $tabset.find('.ui-tabs-panel').index($(location.hash));
if (index != -1) {
$tabset.tabs('select', index);
$(document).scrollTop(0); // $tabset.offset().top
}
// Change hash when selecting
// TODO: Scrolls down and immediately back.
$tabset.bind('tabsshow', function(event, ui) {
var oldScroll = $(document).scrollTop();
location.hash = '#' + ui.panel.id;
$(document).scrollTop(oldScroll); // Since changing hash changes scroll.
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment