Question

I’m not skilled with javascript so if anyone can help me I would be very grateful.

I have a simple list like this:

<ul>
<li id="nav1">Menu 1</li>
<li id="nav2">Menu 2</li>
<li id="nav3">Menu 3</li>
</ul>

When a user click on a menu element I’d like to add a class “menu_active”.

I could reach this result with this code:

<script type="text/javascript">
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");});
});
</script>

The script work, but if you click on #nav1, then on #nav2, then on #nav3, all three items will have the class “menu_active”.

Is there a simple way to have only a single menu element highlighted?

Answer 1

I think this should work:

$(function(){
    var menus = $("#nav1, #nav2, #nav3");
    menus.click(function(){
        menus.not(this).removeClass("menu_active");
        $(this).toggleClass("menu_active");
    });
});

Here is an example.