title: Changing CSS class in jQuery
body: <p>I'm trying to change the CSS class of a couple DIVs, Linked below is my jFiddle</p>
  
  <p>The only change is that the -selected class actually has a background image which seems to have the background color of the -non-selected class. </p>
  
  <p>The other problem is after selecting another div, you can't select the first one again. What exactly is jQuery doing with the classes? When I add the -non-selected class to it, it should become select-able again, right?</p>
  
  <p><a href="http://jsfiddle.net/9FZcz/" rel="nofollow">http://jsfiddle.net/9FZcz/</a></p>
  
  <p>jQuery</p>
  
  <pre><code>$(".selector-box").click(function () {
      $(".selector-box-selected").removeClass("selector-box-selected").addClass("selector-box");
      $(this).removeClass("selector-box").addClass("selector-box-selected");
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="selector-box-selected"&gt;&lt;/div&gt;
  &lt;div class="selector-box"&gt;&lt;/div&gt;
  &lt;div class="selector-box"&gt;&lt;/div&gt;
  &lt;div class="selector-box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.selector-box{
      margin-bottom:2px;
      width:328px;
      height:46px;
      background-color:rgba(255,255,255,.25);
  }
  .selector-box-selected{
      margin-bottom:2px;
      width:351px;
      height:46px;
      background-image:url(../images/layout/SelectedArrow.png);
  }
  </code></pre>