title: Change div content with onclick
body: <p>So i've been stuck with this problem for hours now... actually almost a day already.</p>
  
  <p>Please look at the <a href="http://jsfiddle.net/LmVEZ/6/" rel="nofollow noreferrer">jsfiddle</a> I did for this problem</p>
  
  <p>So what I'm trying to achieve here is to change the image being shown when the arrows are clicked and selected. I wanted them to change into this 
  <img src="https://i.stack.imgur.com/0e6C3.png" alt="pointer when selected"> </p>
  
  <p>but it's obviously not happening. Right now, the background image is showing but it's appearing at the back of the button. What I want is to show a new button/image that would appear or would cover the old button </p>
  
  <p>Here's the js </p>
  
  <pre><code>$('.step_wrapper').on('click','.step_box',function () {
  $('.step_box').removeClass('selected');
  $(this).addClass('selected')
  });
  </code></pre>
  
  <p>The HTML </p>
  
  <pre><code>  &lt;div style="float: left;"&gt;
     &lt;div class="step_wrapper"&gt;
      &lt;div class="step_box" onclick="show('Page2');"&gt;  
     &lt;a href="#"&gt;&lt;span class="RectW"&gt;&lt;img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" &gt;&lt;/span&gt;&lt;/a&gt; 
    &lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;
  
  
    &lt;div style="float: left;"&gt;
     &lt;div class="step_wrapper"&gt;
      &lt;div class="step_box" onclick="show('Page2');"&gt;  
     &lt;a href="#"&gt;&lt;span class="RectW"&gt;&lt;img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" &gt;&lt;/span&gt;&lt;/a&gt; 
      &lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the CSS, you can look at the fiddle :) </p>