how to add class using jquery
<p>i made a small function whose work to do add class in li when we clicks on li, but i want to remove that if it is already had with li.</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>
