title: jQuery addClass click and removeClass when click again
body: <p>I have a box without color. if the box is being <code>click()</code> it will <code>addClass('.red')</code> to make it red, and if click again the box color change to blue. they change alternatively. and I don't know how to make it. </p>
  
  <h2>Code</h2>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div class='box'&gt;&lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>.box {          
      width: 250px;
      height: 100px;    
      border: 1px #000 solid;
  }
  
  .red {
      background: red;
  }
  
  .blue {
      background: blue;
  }
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>$('div').click(function() {
      $(this).addClass('red');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/XQE3J/" rel="nofollow">link of jsfiddle</a></p>