tabs.js

(function() {
  $(document).on('ready page:load', function() {
    $('#tabs').tabs();
    // Setup an event handler to add tab clicks to the browser's history. This makes
    // the back and forward buttons navigate through the tabs. Note: this doesn't
    // handle keyboard navigation of the tabs. That's probably OK, since the tabs
    // have special handling for keyboard navigation built in, and back/forward
    // doesn't really make sense in that context.
    $('ul.ui-tabs-nav a').on('click', function() {
        var href = $(this).attr('href');
        var top = $(window).scrollTop();
        var left = $(window).scrollLeft();
        // Add the selected tab to the browser's history
        window.location = href;
        // Updating the location will cause the window to scroll to the active tab,
        // so let's scroll back to where we were before.
        window.scrollTo(left, top);
    });
  });
  $(window).on('hashchange', function(event) {
    var index = $('#tabs a[href="' + window.location.hash + '"]').parent().index();
    // Index can be -1 if we have an unknown location hash, so default to the first tab
    // rather than the last.
    if (index < 0) {
      index = 0;
    }
    $('#tabs').tabs('option', 'active', index);
  });
})();