Is there a better way to write this navigation expression?

Question

I know this is a redundant way to write these rules, so I wonder if anyone knows a better way to write this. Thanks!

$('.nav li a').eq(0).click(function() { $('.nav li a').eq(0).addClass("active"); $('.nav li a').eq(1).removeClass("active"); $('.nav li a').eq(2).removeClass("active"); $('.nav li a').eq(3).removeClass("active"); }); $('.nav li a').eq(1).click(function() { $('.nav li a').eq(0).removeClass("active"); $('.nav li a').eq(1).addClass("active"); $('.nav li a').eq(2).removeClass("active"); $('.nav li a').eq(3).removeClass("active"); }); $('.nav li a').eq(2).click(function() { $('.nav li a').eq(0).removeClass("active"); $('.nav li a').eq(1).removeClass("active"); $('.nav li a').eq(2).addClass("active"); $('.nav li a').eq(3).removeClass("active"); }); $('.nav li a').eq(3).click(function() { $('.nav li a').eq(0).removeClass("active"); $('.nav li a').eq(1).removeClass("active"); $('.nav li a').eq(2).removeClass("active"); $('.nav li a').eq(3).addClass("active"); }); 

Answer 1

You have a lot of code that can be compressed. Try the following:

 $('.nav li a').click(function() { $('.nav li a').removeClass('active'); $(this).addClass('active'); }); 

Answer 2

I would move the class to <li> , for example:

 $('.nav li').click(function() { $(this).addClass("active").siblings().removeClass("active"); }); 

If you just change the style to fit, for example:

 li.active a { /* styles */ } 

... then it is much easier to use the click handler for the <li> elements, since this is the set you are dealing with. There is also a more efficient .delegate() method:

 $('.nav').delegate('li', 'click', function() { $(this).addClass("active").siblings().removeClass("active"); }); 

Answer 3

 $('.nav li a').bind('click', function() { $('.nav li a').removeClass('active'); $(this).addClass('active') }); 

Answer 4

 $('.nav li a').click(function() { $('.nav li a.active').removeClass("active"); $(this).addClass("active"); }); 

Answer 5

 $('.nav li a').click(function() { $('.nav li a').removeClass('active'); $(this).addClass('active'); }); 

Removes the active class from each a, and then adds it to the clicked element.

Answer 6

I make some assumptions about what your document looks like, but this is what I can do:

 $('.nav li a').click(function() { $('.nav li a').removeClass('active'); $(this).addClass('active'); });