title: jQuery - adding class to li on click
body: <p>I have the following markup</p>
  
  <pre><code>&lt;div id="div1"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" id="id1"&gt;link1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="id2"&gt;link2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="id3"&gt;link3&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to use jQuery to add a class to the clicked link and remove the class from previously clicked links, like</p>
  
  <pre><code>&lt;li class="selected"&gt;&lt;a href="#" id="id1"&gt;link1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" id="id2"&gt;link2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" id="id3"&gt;link3&lt;/a&gt;&lt;/li&gt;
  </code></pre>