 <p>To store the history of a page, the most popular and full featured/supported way is using hashchanges. This means that say you go from <code>yoursite/page.html#page1</code> to <code>yoursite/page.html#page2</code> you can track that change, and because we are using hashes it can be picked up by bookmarks and back and forward buttons.</p> <p>You can find a great way to bind to hash changes using the jQuery History project <a href="http://www.balupton.com/projects/jquery-history" rel="nofollow noreferrer">http://www.balupton.com/projects/jquery-history</a></p> <p>There is also a full featured AJAX extension for it, allowing you to easily integrate Ajax requests to your states/hashes to transform your website into a full featured Web 2.0 Application: <a href="http://www.balupton.com/projects/jquery-ajaxy" rel="nofollow noreferrer">http://www.balupton.com/projects/jquery-ajaxy</a></p> <p>They both provide great documentation on their demo pages to explain what is happening and what is going on.</p> <p>Here is an example of using jQuery History (as taken from the demo site):</p> <pre><code>// Bind a handler for ALL hash/state changes $.History.bind(function(state){ // Update the current element to indicate which state we are now on $current.text('Our current state is: ['+state+']'); // Update the page"s title with our current state on the end document.title = document_title + ' | ' + state; }); // Bind a handler for state: apricots $.History.bind('/apricots',function(state){ // Update Menu updateMenu(state); // Show apricots tab, hide the other tabs $tabs.hide(); $apricots.stop(true,true).fadeIn(200); }); </code></pre> <p>And an example of jQuery Ajaxy (as taken from the demo site):</p> <pre><code> 'page': { selector: '.ajaxy-page', matches: /^\/pages\/?/, request: function(){ // Log what is happening window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]); // Adjust Menu $menu.children('.active').removeClass('active'); // Hide Content $content.stop(true,true).fadeOut(400); // Return true return true; }, response: function(){ // Prepare var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state; // Log what is happening window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state); // Adjust Menu $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active'); // Show Content var Action = this; $content.html(data.content).fadeIn(400,function(){ Action.documentReady($content); }); // Return true return true; </code></pre> <p>And if you ever want to get the querystring params (so <code>yoursite/page.html#page1?a.b=1&amp;a.c=2</code>) you can just use:</p> <pre><code>$.History.bind(function(state){ var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}} } </code></pre> <p>So check out those demo links to see them in action, and for all installation and usage details.</p> <hr> <p>Edit: After seeing your code, this is all you would have to do to use it with jQuery History.</p> <p>Change:</p> <pre><code>$('.tabbed_content .tabs li a').live('click', function (e){ e.preventDefault(); switchTab($(this)); }); </code></pre> <p>To:</p> <pre><code>// Bind a handler for ALL hash/state changes $.History.bind(function(state){ switchTab(state); }); </code></pre> <p>Or if you plan to use jQuery History for other areas too, then we would want to ensure that we only call switchTab for our tabs and not all hashes:</p> <pre><code>// Bind a handler for ALL hash/state changes $.History.bind(function(state){ if ( $('.tabbed_content &gt; .content &gt; li[id='+state+']').length ) switchTab(state); }); </code></pre> <p>We no longer use a onclick event, instead we bind to jQuery History as that will detect the hashchange. This is the most important concept to understand, as for instance if we bookmark the site then go back to it, we never clicked it. So instead we change our clicks to bind to the hashchange. As when we click it, bookmark it, back or forward, the hashchange will always fire :-)</p>