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

  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
     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