Please note that the information in this post may no longer be accurate or up to date. I recommend checking more recent posts or official documentation for the most current information on this topic. This post has not been updated and is being kept for archival purposes.

jQuery UI tabs make it very easy to display blocks of content in an easy-to-use manner. Allowing your users to bookmark the current tab they’re on or use their back/forward browser buttons requires you to change the url hashtag.

The jQuery UI tabs ‘select’ event and some minor Javascript makes changing the hashtags of the url to the current tab’s hashtag very easy:

Change the Hashtag on Select

//jQuery UI Tabs w/ hashtags
jQuery(".tabs").tabs({

  select: function(event, ui) {

     window.location.hash = ui.tab.hash;

  }

});

Now, if the user reloads the page with the hashtag in the url they will immediately land on that tab. If you want to prevent the browser from scrolling to the anchor then you will need to do a bit more.

Prevent the Browser Hash Tag from jumping/Scrolling to the Element

There are a number of different methods for preventing this from happening.

//To prevent default browser scrolling to DIV
//create an temp element with the same ID/class
//then remove from DOM once window is loaded
if(window.location.hash){
     var param = window.location.hash;
     param = param.replace('#','');
     var tempDiv = '
';
     $('#body-wrapper').prepend(tempDiv);
          //DOM loaded: Remove temp element
          window.onload = function() {
              $('#' + param).remove();
          }
}

I couldn’t get event.preventDefault() or return false to work, as commonly mentioned on the SERPs. Hope this helps you guys out!

Similar Posts