title: How to remove color from div when clicking another
body: <p>So I have these 3 blue circles that serve a certain navigation purpose and should remain red when clicked. When you'd click another circle the initial red one should turn blue once again and the clicked circle would then also turn red.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type='text/css'&gt;
  
  a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;}
  a.link:hover {background-color: red}
  a.link.active {background-color: red;}
  
  .position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;}
  .position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;}
  .position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script type='text/javascript'&gt;
              $(function() {
                 $('a.link').click(function() {
                     $('a.link').removeClass('active');
                     $(this).addClass('active');
                 })
              });
           &lt;/script&gt;
  
    &lt;div class="position1"&gt;&lt;a class="link" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="position2"&gt;&lt;a class="link" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="position3"&gt;&lt;a class="link" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ive done this in the past, same script, same way of working <em>but</em> this was by using text not custom div shapes. </p>
  
  <p>I also want to make the second circle lit up red from the start by using the code 
  <code>.eq(1).addClass('active');</code></p>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/src6zf67/" rel="nofollow">https://jsfiddle.net/src6zf67/</a></p>