title: Active/inactive Jquery nav menu
body: <p>I'm not skilled with javascript so if anyone can help me I would be very grateful.</p>
  
  <p>I have a simple list like this:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li id="nav1"&gt;Menu 1&lt;/li&gt;
  &lt;li id="nav2"&gt;Menu 2&lt;/li&gt;
  &lt;li id="nav3"&gt;Menu 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When a user click on a menu element I'd like to add a class "menu_active".</p>
  
  <p>I could reach this result with this code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
  jQuery("#nav1").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
  jQuery("#nav2").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
  jQuery("#nav3").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The script work, but if you click on #nav1, then on #nav2, then on #nav3, all three items will have the class "menu_active".</p>
  
  <p>Is there a simple way to have only a single menu element highlighted?</p>