title: jQuery - addClass or removeClass - Is there an append class?
body: <p>I have css hover over images for my tabs and I'm trying to get the class to change from .how to .how_on when I click on the image HOW.</p>
  
  <p>My tabs are</p>
  
  <p>HOW  |  WHAT  |  WHEN  |  WHO  |  WHY</p>
  
  <p>I have classes for each (.how, .how_on), (.what, .what_on), etc...</p>
  
  <p>Can I make jQuery add _on to the original class name using click(function(){});  ?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="tab_container"&gt;
       &lt;ul class="tabs"&gt;
          &lt;li&gt;&lt;a class="how_on" href="#how"&gt;How&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="why" href="#why"&gt;Why&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="what" href="#what"&gt;What&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="who" href="#who"&gt;Who&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="when" href="#when"&gt;When&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p&gt;&lt;img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="tab_body"&gt;
      &lt;!-- HOW --&gt;
          &lt;div id="how" class="tab"&gt;
              &lt;strong&gt;HOW IT WORKS:&lt;/strong&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){
   //if this is not the first tab, hide it
   jQuery(".tab:not(:first)").hide();
   //to fix u know who
   jQuery(".tab:first").show();
   //when we click one of the tabs
   jQuery(".tabs a").click(function(){
   //get the ID of the element we need to show
   stringref = jQuery(this).attr("href").split('#')[1];
  
  
  
  
   // adjust css on tabs to show active tab
  
  
  
  
  
   //hide the tabs that doesn't match the ID
   jQuery('.tab:not(#'+stringref+')').hide();
   //fix
   if (jQuery.browser.msie &amp;&amp; jQuery.browser.version.substr(0,3) == "6.0") {
   jQuery('.tab#' + stringref).show();
   }
   else
   //display our tab fading it in
   jQuery('.tab#' + stringref).fadeIn();
   //stay with me
   return false;
   });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.tabs
  {
      width: 683px;
      height: 29px;
      padding: 0;
      margin: 0;
      display: inline;
      float: left;
      overflow: hidden;
      list-style-type: none;
  }
  
  .tabs li
  {
      margin: 0;
      padding: 0;
      display: inline;
      float: left;
  }
  
  .tabs  a {  background-position: 0 -58px;}
  .tabs .on a {   background-position: 0 -29px;}
  
  .how,
  a.how:link,
  a.how:visited
  {
    float: left;
    display: inline;
    width: 135px;
    height: 29px;
    margin: 0;
    text-decoration: none;
    text-indent: -99999px;
    overflow: hidden;  
    background-image: url("../images/how_tab.jpg");
  }
  </code></pre>