Active/inactive Jquery nav menu
<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>
