title: Dynamically change body content
body: <p>How do I dynamically change the body content of an html page when a link is clicked?</p>
  
  <p>So I have 3 html pages that looks like this:</p>
  
  <pre><code>&lt;li&gt;&lt;a id="homeContainer" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="testContainer" href='#'&gt;test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="pageContainer" href="#"&gt;page&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>My div:</p>
  
  <pre><code>&lt;div id='container'&gt;
    &lt;/div&gt; 
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>$( document ).ready( function() {
          $( '#testContainer' ).click( function() {
              $( '#container' ).load('test.html');
          });
  </code></pre>
  
  <p>This works fine if i make for all pages a separate function. But how can I make the javascript function taking a page in the <code>load()</code> function instead of hardcoding it?</p>
  
  <p>[Edit]</p>
  
  <p>I dropped my whole page with everything, html, javascript and css here:
  <a href="http://jsfiddle.net/hj9ry/" rel="nofollow">jsfiddle</a></p>