CODEWITHSUNDEEP
jquery
Pennywise83
Pennywise83

Reputation: 1784

Active/inactive Jquery nav menu

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?

Upvotes: 4

Views: 4114

Answers (2)

Oleg Grishko
Oleg Grishko

Reputation: 4281

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.

Upvotes: 6

Fabio Milheiro
Fabio Milheiro

Reputation: 8474

Yes, you can remove the menu_active class from any element that contains it before you add it to the clicked element. Look:

jQuery(".menu_active").removeClass("menu_active");

Upvotes: 0

Related Questions