title: Using jQuery to load page into a div element and remove current loaded page
body: <p>I'm trying to load content/pages dynamically without having to leave the page, or, the page changing. Assume the following:</p>
  
  <p>I have four pages: <code>index.php, about.php, contact.php, products.php</code> and when a visitor visits the website, by entering "<a href="http://mysite.com" rel="nofollow">http://mysite.com</a>" they are greeted with the "index.php" page. </p>
  
  <p>If they click onto a link, let's say "about" then the "index" page is removed and the contents of "about.php" is displayed inside the div <code>content-loaded</code> I have tried the following:</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
     $("#content-loaded").load("index.php");
  
     $('.about').click(function() {
  
         $("#content-loaded").load("about.php");
     });
  
     //....
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu"&gt;
     &lt;a href="#" class="home"&gt;Home&lt;/a&gt;
     &lt;a href="#" class="about"&gt;About&lt;/a&gt;
  &lt;/div&gt;
  
    &lt;div id="content-loaded"&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>But this does not work. It displays both the index page AND the about page. Could anyone suggest any improvements/answers or a more elegant way to structure this?</p>
  
  <p>Thanks </p>