class only on one anchor and remove from all anchor in that ul
<p>I have a UL in html which as following :</p>

<pre><code>&lt;ul class="most-populer"&gt;
  &lt;li&gt;&lt;a id="popular" class=" " href="#"&gt;Most Popular&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="price" href="#" class=" "&gt;Price&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="rating" href="#" class=" "&gt;Star Rating&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="alphabetic" href="#" class="active"&gt;Name&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I am using an ajax function to filter result based on these search criteria . thats working  fine for me . Now what i want that if user clicks on <code>popular</code> then only <code>popular</code> anchor tag have <code>active</code> class and removes from other anchor tag.</p>

<p>I know about <a href="http://api.jquery.com/addClass/" rel="nofollow">addClass()</a> and <a href="http://api.jquery.com/removeClass/" rel="nofollow">removeClass()</a> method of jquery</p>

<p>but i want to use them in that way if user clicks on any of link that UL only that anchor have <code>active</code> class.</p>
