title: How to change CSS style of div after onclick method
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .step_box {
      border: 1.0px solid rgb(204, 204, 204);
      border-radius: 10.0px 10.0px 10.0px 10.0px;
  }
  .step_box:hover{
  background: rgb(184, 225, 252);
  }
  .selected {
      background-color : #fff000;
  }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $('.step_wrapper').on('click','.step_box',function () {
           $('.step_box').removeClass('selected');
           $(this).addClass('selected')
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="step_wrapper"&gt;
  &lt;div class="step_box" onclick="show('Page1');"&gt; &lt;span&gt;Content of page 1&lt;/span&gt;&lt;/div&gt;
  &lt;div class="step_box" onclick="show('Page2');"&gt; &lt;span&gt;Content of page 2&lt;/span&gt;&lt;/div&gt;
  &lt;div class="step_box" onclick="show('Page3');"&gt; &lt;span&gt;Content of page 3&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Right now I have 3 child divs inside one parent div. Right now the step_box divs show a background color when hovering. However; after the onclick method, I want the stepbox div to keep the background color with the style of ".selected". That way it highlights the div the user clicked on.</p>
  
  <p>Any advice?</p>
  
  <p>It works <a href="http://jsfiddle.net/HABdx/1/" rel="nofollow">on this fiddle</a> but not when i load it on my browser, am i linking the jquery to html correctly?</p>
  
  <p>I'm open to suggestions if there are any other suggestions on how to do this, thanks!</p>