title: Active link, javascript css
body: <pre><code>&lt;script type="text/javascript"&gt;
              $(document).ready(function(){
              $('#info a.tooltip').addClass('active');
              });
  &lt;/script&gt;
  
  &lt;ul class="ca-menua"&gt;
                      &lt;li&gt;&lt;a href="#home" class="tooltip"&gt;&lt;span class="ca-icona"&gt;O&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#info" class="tooltip"&gt;&lt;span class="ca-icona" id="info"&gt;e&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#komp" class="tooltip"&gt;&lt;span class="ca-icona"&gt;S&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#cases" class="tooltip"&gt;&lt;span class="ca-icona"&gt;F&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#kont" class="tooltip"&gt;&lt;span class="ca-icona"&gt;@&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
  a.tooltip.active #info  {
      color: #f3cb12;
      font-size: 50px;
  }
  </code></pre>
  
  <p>i'm trying to do a active link effect, but I just can't seem to get it right.
  The effect is on this link (from page 2, not the frontpage) <a href="http://sabinequardon.dk/umami/" rel="nofollow">Click here to see website.</a></p>
  
  <p>"The active function doesn't work. When you're at a specific page, the navigation item for THAT page should be active.. and it doesn't work now. - it's so you can see WHERE you are."</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $('a.tooltip').click(function(e) {
          var $this = $(this);
          $(".ca-menua").load($this.attr('href'));
          $('a.tooltip').removeClass('active');
          $(this).addClass('active');
  
          // prevent default link click
          e.preventDefault();
      })
  });&lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;ul class="ca-menua"&gt;
                 &lt;li&gt;&lt;a href="#home" class="tooltip"&gt;&lt;span class="ca-icona"&gt;O&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#info" class="tooltip"&gt;&lt;span class="ca-icona"&gt;e&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#komp" class="tooltip"&gt;&lt;span class="ca-icona"&gt;S&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#cases" class="tooltip"&gt;&lt;span class="ca-icona"&gt;F&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#kont" class="tooltip"&gt;&lt;span class="ca-icona"&gt;@&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li a.tooltip.active .ca-icon {
      color: #f3cb12;
      font-size: 50px;
  }
  </code></pre>
  
  <p>Thanks :-)</p>