Navigation in pages with JQuery (hashchange)

Navigation in pages with JQuery (hashchange)

So I wrote a little jquery script. The script loads 2 Div's out of one different page, and loads them into the told Div's.
You can use it as a navigation script, or just to load Div's from a seperate sheet.

The advantage of using this as your Navigation is, that it only loads the needed Div's and not the whole site.

That it works you have to look for the namegiving. First you have to give the links a special type of "link", a hash. For example:
<a href="#book">Book</a>

Because on my site the other pages are in a file beside the Index folder, in wich i load my jquery script, I have to go into that folder first. This folder is named in my script pages.

In this folder you have the document in wich my desired file is.
In my example I have to name it now fix after the hash, so it's now called:

The Div's wich should be loaded should, if you leave my script how it is, be called like this:

<div id="booktitle">Title</div> und <div id="bookbox">content</div>

The Div's wich should be filled should be, if you leave my script how it is with the ID's #title and #mainbox.

function hashnav(){
var hashfull = document.location.hash
var hash = hashfull.replace('#', '');
$("#title").load("pages/" + hash + ".html div#" + hash + "title");
$("#mainbox").load("pages/" + hash + ".html div#" + hash + "box");

$(document).ready(function() {

$(window).bind( 'hashchange', function() {
return false;


If you have questions how the script excactly works or something different about my script or the using of it, just contact me.
I would be pleased if I could help someone with his script ^^