title: JQuery on click load html
body: <p>I am try to build a menu for my personal webpage which would load a html file into a contents div when I click on the corresponding link on the menu. The layout is what I want, but unfortunately I cannot get the click event to work. This is what I have:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Jorge Martins' HomePage&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css" media="all" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
      &lt;script language="javascript"&gt;
  $(document).ready(function () {
      $('li.about').click(function(){
          $('#content').load( 'about.html' );
      });
      $('#research').click(function(){
          $('#content').load( 'about.html' );
      });
  });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
      &lt;ul class="menu"&gt;
          &lt;li id="home"&gt;Home&lt;/li&gt;
              &lt;li class="about"&gt;About me&lt;/li&gt;
              &lt;li id="research"&gt;Research&lt;/li&gt;
          &lt;li id="publications"&gt;Publications&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
      &lt;div id="content"&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>ul.menu {
  margin: 0;
  padding: 0;
  float:left;
  width: 15%;
  margin: 10px;
  }
  
  
  ul.menu li {
  list-style: none;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:24px;
  font-weight:bold;
  color: #555;
  height: 32px;
  voice-family: "\"}\""; 
  voice-family: inherit;
  height: 24px;
  text-decoration: none;
  }   
  
  
  ul.menu li:hover {
  color: #FFF;
  /*padding: 0px 0 0 0px;*/
  }
  
  #content {
  width: 75%;
  float:left;
  margin: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #555;
  }
  </code></pre>
  
  <p>Any idea on what I've done wrong? </p>
  
  <p>Thanks.</p>
  
  <p>EDIT:
  Removed extra tab as per Joe's comment.</p>