title: Load a href into a div when pressing a link?
body: <p>I know this has been asked before and I tried to do what was suggested but I can't seem to get it working.</p>
  
  <p>Basically I've got links like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class='current'&gt;&lt;a href='portfolio/index.html'&gt;portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='about/index.html'&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And then I've got a div like this:</p>
  
  <pre><code>&lt;div class='loaded_content'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>This is the script I have, which is loaded in the html header along with the jquery base:</p>
  
  <pre><code>$(document).ready(function() {
      $('a').click(function(event){
          event.preventDefault();
          $('.loaded_content').load($(this).attr('href'));
          return false;
      });
  });
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>edit:</p>
  
  <p>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.</p>
  
  <p>edit:</p>
  
  <p>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?</p>
  
  <p>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?</p>