title: JQuery - Changing active link color
body: <p>I've got a small page with two links that load content into a div dependant upon which link is pressed.</p>
  
  <p>Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.</p>
  
  <p>I'm attempting to do this with my current function using the following however it isn't working:</p>
  
  <p>Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function loadContent(id) {
          $("#video").load("streams.php?o="+id+"");
          $('active').removeClass('active');
          $(this).addClass('active');
      }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>Full code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;beam&lt;/title&gt;
  
      &lt;script type="text/javascript" src="swfobject.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
      &lt;/script&gt;
  
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function loadContent(id) {
              $("#video").load("streams.php?o="+id+"");
              $('active').removeClass('active');
              $(this).addClass('active');
          }
      &lt;/script&gt;
  
      &lt;style&gt;
  
      * { margin:0; padding:0; }
      img{ border-style:none; }
  
      html { height: 100%; }
      body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
  
      a {
      color:#fff;
      text-decoration: none;
      }
  
      .active {
      color:#00d2ff;
      }
  
      .container {
      position:absolute;
      background:url("images/video-bg.jpg") no-repeat;
      width:520px;
      height:576px;
      }
  
      #video {
      position:relative;
      background:#000;
      top:275px;
      left:55px;
      width:400px;
      height:222px;
      }
  
      #stream-controller {
      position:relative;
      left:55px;
      top:285px;
      width:200px;
      }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body onLoad="loadContent(1);"&gt;
  
      &lt;div id="fb-root"&gt;&lt;/div&gt;
  
      &lt;div class="container"&gt;
  
          &lt;div id="video"&gt;
  
              &amp;nbsp;
  
          &lt;/div&gt;
  
          &lt;div id="stream-controller"&gt;
              &lt;p&gt;&lt;a href="javascript:loadContent(1);" class="active"&gt;STREAM 1&lt;/a&gt; | &lt;a href="javascript:loadContent(2);"&gt;STREAM 2&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>