With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!

(EXPLAIN)

Navigation

Burgers | Chicken | Kebabs | Kielbasa | Ribs | Steak

jQuery BBQ

Click a nav item above or below to load some delicious AJAX content! Also, once the content loads, feel free to further explore our savory delights by clicking any inline links you might see.
Burgers | Chicken | Kebabs | Kielbasa | Ribs | Steak

The code

Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far less robust, it is much more simple. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

$(function(){
  
  // Enable "AJAX Crawlable" mode.
  $.param.fragment.ajaxCrawlable( true );
  
  // Keep a mapping of url-to-container for caching purposes.
  var cache = {
    // If url is '' (no fragment), display this div's content.
    '': {
      title: "jQuery BBQ",
      elem: $('.bbq-item')
    }
  };
  
  // Bind an event to window.onhashchange that, when the history state changes,
  // gets the url from the hash and displays either our cached content or fetches
  // new content to be displayed.
  $(window).bind( 'hashchange', function(e) {
    
    // Get the hash (fragment) as a string, with any leading # removed. Note that
    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
    var url = $.param.fragment();
    
    // Remove .bbq-current class from any previously "current" link(s).
    $( 'a.bbq-current' ).removeClass( 'bbq-current' );
    
    // Hide any visible ajax content.
    $( '.bbq-content' ).children( ':visible' ).hide();
    
    // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
    url && $( 'a[href="#!' + url + '"]' ).addClass( 'bbq-current' );
    
    if ( cache[ url ] ) {
      // Since the element is already in the cache, it doesn't need to be
      // created, so instead of creating it again, let's just show it!
      cache[ url ].elem.show();
      
      // Update the document title.
      document.title = cache[ url ].title;
      
    } else {
      // Show "loading" content while AJAX content loads.
      $( '.bbq-loading' ).show();
      
      // Load external content (stored in the XML data file) via AJAX. The
      // purpose of page.php is simply to provide the data stored in XML in
      // the more friendly JSON format.
      $.getJSON( 'page.php', { id: url }, function(data){
        
        // Ensure that data was actually returned. You could easily go a step
        // further and check that data.attr.status isn't '404', for example.
        if ( data ) {
          // Update the document title.
          document.title = data.attr.title;
          
          // Update the internal cache with a reference to this element as well
          // as its title.
          cache[ url ] = {
            title: data.attr.title,
            elem: $( '<div class="bbq-item"/>' )
              
              .html( data.content )
              
              // Append the content container to the parent container.
              .appendTo( '.bbq-content' )
          };
        }
        
        // Content loaded, hide "loading" content.
        $( '.bbq-loading' ).hide();
      });
    }
  })
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger( 'hashchange' );
  
});