title: how do i dynamically add or remove classes attached to an element using jquery?
body: <p>I'm trying to add and remove classes dynamically using jQuery in my webpage. Here;s the code -</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="" content=""&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      .sub-inactive{display:none;}
      .sub-active{display:!important;}
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $('.sub').parent().hover(
          function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
          function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },
          );
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;ul class="main"&gt;
              &lt;li&gt;link1&lt;/li&gt;
              &lt;li&gt;link2&lt;/li&gt;
              &lt;li&gt;link3
                  &lt;ul class="sub sub-inactive"&gt;
                      &lt;li&gt;link 3a&lt;/li&gt;
                      &lt;li&gt;link 3a&lt;/li&gt;
                      &lt;li&gt;link 3a&lt;/li&gt;
                      &lt;li&gt;link 3a&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;link4&lt;/li&gt;
              &lt;li&gt;link5&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically, there are multiple classes attached to an element (sub-active, sub-inactive in this case). And based on some event that happens in the page, i want to dynamically alter the class state of the element. ie, for example if for an element, the class that is present right now is class = "sub sub-active", i want to change using jquery to class = "sub sub-INACTIVE"....</p>
  
  <p>Please let me know how to add/remove specific classes from an element. The two lines of code given below (from the above example) does not seem to work - </p>
  
  <pre><code>function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
          function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }
  </code></pre>
  
  <p>Thanks!</p>