javascript - 使用onclick更改div内容

所以我已经被这个问题困扰了几个小时了……实际上已经差不多一天了。

请查看我针对此问题所做的jsfiddle

所以我要在这里实现的是更改单击和选择箭头时显示的图像。我希望他们改变成这个
 

但这显然没有发生。目前，背景图片正在显示，但显示在按钮的背面。我想要的是显示一个新按钮/图像，该按钮将显示或覆盖旧按钮

这是js

$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});

HTML

  <div style="float: left;">
   <div class="step_wrapper">
    <div class="step_box" onclick="show('Page2');">
   <a href="#"><span class="RectW"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></span></a>
  </div>
    </div></div>


  <div style="float: left;">
   <div class="step_wrapper">
    <div class="step_box" onclick="show('Page2');">
   <a href="#"><span class="RectW"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></span></a>
    </div>
    </div></div>

和CSS，您可以看一下小提琴:)

最佳答案

您可以添加一些CSS以隐藏图像。

.selected img {
    opacity: 0;
}

forked JSFiddle