title: jQuery - Add/Remove class based on selected item in list
body: <p>I have a very basic list in HTML:</p>
  
  <pre><code>&lt;ul id="thumbselector"&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/80/80"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/81/81"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/80/80"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/81/81"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/82/82"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/81/82"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/80/80"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/81/81"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/80/80"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/81/81"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/82/82"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://placekitten.com/g/81/82"/&gt;&lt;/li&gt;                            
  &lt;/ul&gt;
  </code></pre>
  
  <p>Then im using toggleClass to add an .active class to the img when its clicked:</p>
  
  <pre><code>$('#thumbselector img').click(function() {
    $(this).toggleClass('active');
  }); 
  </code></pre>
  
  <p>However I want each of the images to be aware of each other, so when I select one image and give it the .active class - If I then select another image I want to make sure any previous image with the .active class has it removed. </p>
  
  <p>Any ideas?</p>