title: navbar with buttons that gain active proprieties onclick but loses them when other button is selected
body: <p>So what I want is a simple menu with 6 buttons. The objective is that the buttons change background color when we click on them, but the color goes back to the original state when we click on another button. I tried to use some active class to add proprieties to the active button (link) together with some script but it is not working. The menu is in one frame and the content is in the target frame (I dont want to copy the navbar code to every page) and thats why Im using "targets" but I think thats the problem.</p>
  
  <p>I hope someone can help me because I'm noob with this and spent many time researching with no success.</p>
  
  <p><strong>HTML:</strong>
      
      <ul>
      Home</li>
      <li>Activities</li>
      <li>Members</li>
      <li>Projects</li>
      <li>Publications</li>
      <li>Contacts</li>
      </ul>
      </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#menu1 ul {
  float:left;
  width:100%;
  list-style-type:none;
  padding:0;
  margin:0;
  }
  
  #menu1 li {
  display:inline;
  text-align:center;
  }
  
  #menu1 a {
  float:left;
  width:120px;
  padding:0 5px 0 5px;
  }
  
  #menu1 a:hover {
  background-color:#eee;
  }
  
  #menu1 a:active {
  background-color:#ddd;
  }
  
  #menu1 li.active {
  background-color:#eee;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(document).ready(function()
  {$('ul.menu1 li a').click(function (e)
  {$('ul.menu1 li.active').removeClass('active');
  $(this).parent('li').addClass('active');
  });          
  });
  </code></pre>