Devin Walker is a San Diego based entrepreneur, developer and designer.

jQuery UI Tabs with Hashtags

Posted on Mar 7, 2012 in Coding, Web Development | No Comments

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

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.

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