I know this has been asked before and I tried to do what was suggested but I can't seem to get it working.

Basically I've got links like this:

<ul>

    <li class='current'><a href='portfolio/index.html'>portfolio</a></li>

    <li><a href='about/index.html'>about</a></li>

</ul>

And then I've got a div like this:

<div class='loaded_content'></div>

What I want to do is, load the page in the link href into the div as I press the link. I also want to prevent the browser from navigating the link the normal way.

This is the script I have, which is loaded in the html header along with the jquery base:

$(document).ready(function() {

    $('a').click(function(event){

        event.preventDefault();

        $('.loaded_content').load($(this).attr('href'));

        return false;

    });

});

What am I doing wrong?

edit:

Ok so I placed the script into the document.ready and the preventdefault is now working, but the href is still not getting loaded into the div.

edit:

Okay so I have got this working partially now. The html is now getting loaded properly into the div but I am now facing a new problem. The page I am loading is in a subdirectory along with its own .css file and some images. How can I make sure the css is being loaded aswell?

The reason I want to do this is because my pages on the website has the same structure on all pages, and I want to have like a frame website, where I only load the content of each page to keep from loading the same things over and over. Maybe there's another, better approach of this?