title: Class not overwriting with addClass
body: <p>I'm using jQuery's addClass to add a class to an tab so when clicked it'll change the class so it's obvious the tab is highlighted.</p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div id="mainNav"&gt;
              &lt;ul&gt;
                  &lt;li id="LinktheBand" onclick="nav('theBand')"&gt;The Band&lt;/li&gt;
                  &lt;li id="linkTheMusic" onclick="nav('theMusic')"&gt;The Music&lt;/li&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>#mainNav li {
      float:left;
      margin-right:5px;
      color:white;
      font-family:Tahoma;
      font-weight:bold;
      padding: 10px 8px 0px 8px;
      background:url('../images/transparent-65.png');
      height:40px;
      height: 25px !important;
      border:1px solid #000;
  }
  
  #mainNav li:hover {
      float:left;
      margin-right:5px;
      color:white;
      font-family:Tahoma;
      font-weight:bold;
      padding: 10px 8px 0px 8px;
      background: #660000;
      height:40px;
      height: 25px !important;
      border:1px solid #660000;
  }
  
  .mainNavSelected {
      float:left;
      margin-right:5px;
      color:white;
      font-family:Tahoma;
      font-weight:bold;
      padding: 10px 8px 0px 8px;
      background: #660000;
      height:40px;
      height: 25px !important;
      border:1px solid #660000;
  }
  </code></pre>
  
  <p>My Javascript</p>
  
  <pre><code>function nav(a) {
  $('#'+a).show();
  $('#Link'+a).addClass('mainNavSelected');
  }
  </code></pre>
  
  <p>This works properly, I check firebug and can see the class="mainNavSelected" is added, but the list element doesn't take any properties of the new class. Firebug lists all the class items for mainNavSelected, but has them all crossed out. What am i missing to replace the class of this element?</p>