title: Javascript change class onclick
body: <p>Im just trying to get to grips with javascript / ajax / jQuery so Im building a ticket system for my website.</p>
  
  <p>Anyway, I have a table at the top of the page;</p>
  
  <pre><code>    &lt;table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black"&gt;
      &lt;tr class="subtopic" style="font-size: 15px;"&gt;
          &lt;td&gt;&lt;a onClick="javascript: ShowNewTickets()"&gt;New Tickets&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a onClick="javascript: ShowYourTickets()"&gt;Your Tickets&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a onClick="javascript: ShowPuplicTickets()"&gt;Public Tickets&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When the page loads I want "New Tickets" to have the class "selected". If they hover the mouse over any of the unselected menus then it has a highlighted effect. Once they click onto another link the "selected" class will be removed from the other TD and added to the new TD.</p>
  
  <p>I have tryed onmouseover and onmouseout to do the highlight effect but it messes up when it comes to the link which is already highlighted.</p>
  
  <p>I have also tryed,</p>
  
  <pre><code>    $('.off').live('mouseenter', function() {
      if ($(this).hasClass('selected') == false) {
          $(this).removeClass('off').addClass('highlighted');
      }
  });
  </code></pre>
  
  <p>But that then keeps the TD highlighted.</p>
  
  <p>Thanks for reading.</p>