Question

I have a menu with list items which have different background colours if someone clicks on it. I used this code to achieve that:

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

That worked fine. The CSS works fine too, so the colors change, but I have one issue and that is that I can’t set a standard list item to have a background color BEFORE someone clicks on it. So I want to have a red background on a list item, before someone clicks on it. If someone clicks on a different list item, this red background color has to switch from the standard to the clicked one.

How can I achieve this?

This is the menu:

<nav id="navigation">
<ul id="quick-index-nav" class="slim">
<li>
<a class="link" href="#">First one</a>
</li>
<li>
<a class="link" target="main" href="#">Second one</a>
</li>
<li>
<a class="link" href="#">Third one</a>
</li>
</ul>
</nav>

Answer 1

I added another removeClass in the script and gave a background-color on the list-item that I wanted to be highlighted before it was clicked. That worked like a charm.

$(function() {
    $('a.link').click(function() {
       $('.link').removeClass('active');
       $('.a-class-name').removeClass('a-class-name');
       $(this).addClass('active');
   });
});