title: Css class active
body: <p>I have small problem with css and jQuery. I have 2 buttons and I want to set the background of the one clicked to blue, and I want to do this with 'active' css property. It is not working for some reason. Whenever the button is not active anymore, it loses the background color. Here is the code: 
  HTML:</p>
  
  <pre><code>&lt;div id = 'hey'&gt;
    &lt;div class = 'b' id = 'b1' href="#"&gt;Button one&lt;/div&gt;
      &lt;div class = 'b' id = 'b2' href="#"&gt;Button Two&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>body,html { 
    font: bold 14px/1.4 'Open Sans', arial, sans-serif;
    background: #000;
  }
  #hey { 
    margin: 150px auto 0; 
    padding: 0; 
    list-style: none; 
    display: table;
    width: 600px;
    text-align: center;
  }
  
  .b {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
  
    display: inline-block;
    padding: 15px 20px;
    position: relative;
  }
  .b:active {
    background-color: blue;
  }
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>  $(".b").click(function() {
      $(this).addClass('active');
    });
  </code></pre>