$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
// Iterate over all nav links, setting the "selected" class as-appropriate.
$('#nav a').each(function(){
var that = $(this);
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})
// 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).hashchange();
});
jQuery hashchange event enables very basic bookmarkable #hash history via a cross-browser window.onhashchange event.
Click, and watch as the magic happens!
test 1
test 2
test 3
test 4
Note that there is absolutely no JavaScript attached to the click event of these links. All they do is set the location.hash via href, and the callback bound to the window.onhashchange event does the rest. Once you've clicked one or more of these links, fool around with your browser's back and next buttons.
The code
That's it!
This plugin is, by design, very basic. If you want to add lot of extra utility around getting and setting the hash as a state, and parsing and merging fragment params, check out the jQuery BBQ plugin. It includes this plugin at its core, plus a whole lot more, and has thorough documentation and examples as well. You can't have too much of a good thing!