Question

I am using jQuery to make a website, and I want to be able to have my navigation in a separate div from my content. Also, I want to be able to have a sort of tabbed navigation system such that I can click a link in the navigation and it will load the content into the main content div. Basically, I want to do this so that I can just maintain one page with all the content, rather than a bunch of pages for each section. I have included a picture that will hopefully make my question much more clear (right click and “viw image”, it’s too small on this page):

example http://img402.imageshack.us/img402/1733/examplew.jpg

Answer 1

I would encourage you to use event delegation. For instance we can use the .on method to attach a single event to the navigation pane that will listen for clicks on links:

$("#navigation").on("click", "a", function(e){
    e.preventDefault();
    $("#content").load( $(this).prop("href") );
});

Which works with the following markup:

<div id="navigation">
    <a href="home.html">Home</a>
    <a href="gallery.html">Gallery</a>
</div>
<div id="content"><!-- content will load here --></div>