What I'm trying to do is to change the background color when a link is clicked (in this case a list item). When it is no longer clicked, it should revert back to its normal color.

I was able to get this to work via the jQuery `addClass` and `removeClass` methods, but this seems to be hardcoding it.

[jsFiddle](http://jsfiddle.net/Mahesha999/CpnYW/1/)

    $(document).ready(function() {
        $(".nav > li:first-child").click(function(){
    	  $(this).addClass("highlighted");
          $(".nav > li:nth-child(2), .nav > li:nth-child(3), .nav > li:last-child").removeClass("highlighted");
    	});
        $(".nav > li:nth-child(2)").click(function(){
            $(this).addClass("highlighted");
            $(".nav > li:first-child, .nav > li:nth-child(3), .nav > li:last-child").removeClass("highlighted");
        });
        $(".nav > li:nth-child(3)").click(function(){
            $(this).addClass("highlighted");
            $(".nav > li:first-child, .nav > li:nth-child(2), .nav > li:last-child").removeClass("highlighted");
        });
        $(".nav > li:last-child").click(function(){
            $(this).addClass("highlighted");
            $(".nav > li:first-child, .nav > li:nth-child(2), .nav > li:nth-child(3)").removeClass("highlighted");
        });
    });