Нет необходимости связывать событие клика с каждым идентификатором, а вместо этого связывать все элементы списка этого неупорядоченного списка. Затем используйте методы .parent (). Children (). Следующее должно работать:

$('ul li').click(function(){
  $(this).addClass('active');
  $(this).parent().children('li').not(this).removeClass('active');
});

Вы, вероятно, найдете это лучше (в противном случае страница будет прыгать) -

$(function() {
$("li").click(function() {
  // remove classes from all
  $("li").removeClass("active");
  // add class to the one we clicked
  $(this).addClass("active");
  // stop the page from jumping to the top
  return false;
});
});

Ты можешь сделать:

$('li').click(function(e){
    e.preventDefault();
   $(this).addClass('active');
    $(this).siblings().each(function(){
        $(this).removeClass('active') ;

    });
});

скрипка здесь http://jsfiddle.net/UVyKe/1/

Дайте ul идентификатор или класс и выберите его.

<ul id = "nav">...

var $navItems = $('#nav > li');
$navItems.click(function(){
    $navItems.removeClass('active');
    $(this).addClass('active');
});

$("ul li").click(function()
{
$("ul .active").removeClass("active");
$(this).addClass("active");
});

Вы можете добавить активный класс, используя одну строку ниже, без каких-либо событий

$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

ссылка для ссылки