title: How to add class using jQuery?
body: <p>I made a small function whose work to do add class in <code>&lt;li&gt;</code> when we clicks on &lt;<code>li&gt;</code>, but I want to remove that if it is already had with <code>&lt;li&gt;</code>.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
      &lt;meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"&gt;
      &lt;meta name="created" content="Tue, 22 May 2012 12:39:23 GMT"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
      &lt;!--
      body {
        color:#000000;
        background-color:#FFFFFF;
      }
      a  { color:#0000FF; }
      a:visited { color:#800080; }
      a:hover { color:#008000; }
      a:active { color:#FF0000; }
      --&gt;
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      $(function(){
  
      $('.main').find('li').each(function(){
  
      $(this).live('click', function (){
  
      $(this).addClass('active')
  
      })
  
      })
  
      })
  
      &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;ul class="main"&gt;
    &lt;li&gt;first&lt;/li&gt;
  
    &lt;li&gt;second&lt;/li&gt;
      &lt;li&gt;third&lt;/li&gt;
        &lt;li&gt;fourth&lt;/li&gt;  
  
    &lt;/ul&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>