Changing the background color when a link is clicked 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

$(document).ready(function() {
    $(".nav &gt; li:first-child").click(function(){
      $(this).addClass("highlighted");
      $(".nav &gt; li:nth-child(2), .nav &gt; li:nth-child(3), .nav &gt; li:last-child").removeClass("highlighted");
    });
    $(".nav &gt; li:nth-child(2)").click(function(){
        $(this).addClass("highlighted");
        $(".nav &gt; li:first-child, .nav &gt; li:nth-child(3), .nav &gt; li:last-child").removeClass("highlighted");
    });
    $(".nav &gt; li:nth-child(3)").click(function(){
        $(this).addClass("highlighted");
        $(".nav &gt; li:first-child, .nav &gt; li:nth-child(2), .nav &gt; li:last-child").removeClass("highlighted");
    });
    $(".nav &gt; li:last-child").click(function(){
        $(this).addClass("highlighted");
        $(".nav &gt; li:first-child, .nav &gt; li:nth-child(2), .nav &gt; li:nth-child(3)").removeClass("highlighted");
    });
});
The opening and closing tags don't match in your JSFiddle.

It's not a good idea to use presentational like highlighted for a CSS class name.  It would be better to use current or selected, and let the stylesheet decide how to indicate which item is currently selected — whether by highlighting, underlining, or whatever visual hint it chooses.

It would be a lot simpler if you removed the highlighted class from all items, then added it back for just the selected item.



$(document).ready(function() {
    $(".nav &gt; li").click(function() {
        $(".nav &gt; li").removeClass('current');
        $(this).addClass('current');
    });
});
* {
 margin: 0px;
 padding: 0px;
}

nav {
 background-color: #e4801c;
 height: 100%;
}
.nav &gt; li {
 text-align: center;
 text-transform: uppercase;
}

.current {
 background: #faaf5e;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;nav class="navbar navbar-default" role="navigation"&gt;
        &lt;ul class="nav navbar-nav"&gt;                      
          &lt;li&gt;Clients&lt;/li&gt;
          &lt;li&gt;Services&lt;/li&gt;
          &lt;li&gt;Add&lt;/li&gt;
          &lt;li&gt;Time&lt;/li&gt;
        &lt;/ul&gt;
&lt;/nav&gt;




In addition, I suggest using text-transform: uppercase to make the text all caps, as that is also a presentation style choice.