title: JQuery addClass to menu
body: <p>I make this menu that is stack on top and the section "Representaciones" is shown on the same page but below a welcome image. When I clic it work but if I refresh the page, the class "selected" disappears from "representaciones" and it shows on "home". 
  I can't make it work, thanks for your help.</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="index.php" class="selected"&gt;HOME&lt;/a&gt;
          &lt;/li&gt;
         &lt;li&gt;
         &lt;a href="#representaciones"&gt;REPRESENTACIONES&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
         &lt;a href="productos.html" target="_parent"&gt;PRODUCTOS&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
         &lt;a href="eventos.html" target="_parent"&gt;EVENTOS&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
         &lt;a href="contacto.php" target="_parent"&gt;CONTACTO&lt;/a&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#menu{
  padding-left:225px;
  margin: 0 auto;
  position:absolute;  
  width:900px;
  height:142px;
  background-color:#f6f6f6;
  }
  
  #menu ul li a {
      text-align:center;
      float:left;
      list-style: none outside none;
      font-weight:200;
      color: #919ca1;
      font-size:20px;
      text-decoration:none;
      padding-top:60px;
  }
  
  #menu ul li a:hover{
      color: #f6f6f6;
      background-color:#d3242c;
      padding: 61px 40px 61px 40px;
  }
  
  #menu ul li a.selected{
      color: #f6f6f6;
      background-color:#d3242c;
      padding: 61px 40px 61px 40px;
  }
  </code></pre>
  
  <p>jquery that i found in this web</p>
  
  <pre><code>$(document).ready(function () {
      $('#menu li a').click(function () {
          $('#Menu ul li a').removeClass('selected');
          $(this).addClass('selected');
      });
  });
  </code></pre>