New web technologies have made it extremely simple to create HTML pages with tabs. Using Bootstrap and JQuery you can create tabs in minutes. The Bootstrap website has more details on how to do this: http://getbootstrap.com/2.3.2/javascript.html#tabs. What seems to be missing from most tab solutions today is how state should be maintained. When you leave a tabbed page and go back, in many cases you would expect that the tab that you were on is still selected. Similarly, if I am navigating to a page and want to be navigated to a specific tab on that page I should be able to specify that tab.
As it turns out there is a simple solution to provide state to your tabs as well as the ability to navigate to those tabs. First we need to create our tabs in the HTML markup similar to how it was described in the Bootstrap example linked to above:




















This HTML has two main components: the tab links and the tab contents. These two components coordinate with each other behind the scenes to ensure that the corrects tab links are in the active state and that the correct tab contents are displayed and hidden.

Now that the HTML is setup we need to have a way to maintain the current tab in the URL. Since updating query parameters will usually force the browser to do a navigation event, we will instead utilize the URL's hash. Here is the javascript that we will use to grab the hash and select the correct tab:

$(document).ready(function () {
// Handle tab selection
var activeTab = $('#' + window.location.hash.substr(2));

if(activeTab.length) {
activeTab.tab('show');
} else {
$("#defaultTab").tab('show');
}
});

This javascript has a few quirky things going on. The first quirkiness is the fact that we are doing a substring on the hash of the URL. This is a very important part of the functionality. Behind the scenes the tab controls that we are using reference the IDs of the tab contents so that it can determine which contents should be shown and hidden. Since it uses the IDs and since the URL's hash will typically scroll to the element with that ID, we must avoid using the same IDs in the hash and the tab contents. I have made it simple and just added an underscore ('_') to the beginning of the hash to differentiate it from the IDs of the tab contents. If you do want the user to be scrolled to the tab content when the page is loaded or when they select a tab then you can use the same IDs. The next part of the javascript is fairly straightforward; it checks to see if there actually is a tab element that matches the hash and if there is one it will activate that tab, otherwise it will activate a default tab.

The final addition we need to make is to update the URL hash when the active tab changes. To do this we will add a function that will be called when any of the tab links are clicked:

$("#tabs li a").click(function () {
window.location.hash = "_" + this.id;
return true;
});

This function sets the hash to the ID of the selected tab with an underscore prefixed. It then returns true to indicate that any subsequent event handlers should still be executed. This allows the 'behind the scenes' tab magic to continue to show/hide the correct tab contents.

Using just a few lines of javascript here helps to give your tabbed web page an intuitive and flexible navigation framework.