title: Setting a active link css at first and dynamically change it
body: <p>I have a menu with list items which have different background colours if someone clicks on it. I used this code to achieve that: </p>
  
  <pre><code>$(function() {
     var links = $('a.link').click(function() {
         links.removeClass('active');
         $(this).addClass('active');
     });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>How can I achieve this?</p>
  
  <p>This is the menu:</p>
  
  <pre><code>&lt;nav id="navigation"&gt;
  &lt;ul id="quick-index-nav" class="slim"&gt;
  &lt;li&gt;
  &lt;a class="link" href="#"&gt;First one&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a class="link" target="main" href="#"&gt;Second one&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a class="link" href="#"&gt;Third one&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>