所以我已经坚持了几个小时这个问题......实际上已经差不多一天了。
请查看我为此问题所做的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,你可以看一下小提琴:)
答案 0 :(得分:1)
<div style="float: left; width:400px;">
<div class="step_wrapper">
<a class="step_box" onclick="show('Page2');"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></a>
</div>
<div class="step_wrapper">
<a class="step_box"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></span></a>
</div></div>
.step_wrapper{
display:inline;
width: 25px;
height: 25px;
}
.step_box {
}
.selected{
/*background: black;*/
}
.PointWHover{
display: none;
}
.PointWHover .notch {
position: absolute;
top: -7px;
left: 2px;
margin: 0;
border-top: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #676767;
padding: 0;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
_border-right-color: pink;
_border-left-color: pink;
_filter: chroma(color=pink);
}
a:hover + .PointWHover {
display: inline;
background: none repeat scroll 0% 0% #676767;
padding: 5px;
top: 35px;
left: 4px;
color: #FFF;
position: absolute;
font-family: Arial;
font-size: 12px;
font-weight: bold;
}
$('.step_wrapper').on('click','.step_box',function () {
var url = $(this).find( "img" ).attr( "src","http://ij-plugins.sourceforge.net/vtk-examples/SimpleCone.jpg");
alert(url);
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
答案 1 :(得分:0)
试试这个
$('.step_wrapper').on('click','.step_box',function () {
//your code here
$(this).find("img").attr("src","your url here");
});
答案 2 :(得分:0)
您不应该更改div的背景,但是您应该通过在单击时更改其来源来处理您的图像。为你做了一个新的小提琴,这样你就可以看到 DEMO
$('.arrow').on('click', function () {
$('.arrow').attr('src','http://i59.tinypic.com/2lcvjlz.png');
$(this).attr('src', 'http://i62.tinypic.com/2vb8kn8.png')
});
为此,请为您的图像指定一个名为 arrow - &gt;的类。 class="arrow"
答案 3 :(得分:0)
试试这个: - DEMO
在CSS
中替换它.selected{
background: url("http://i62.tinypic.com/2vb8kn8.png");
z-index:99999;
}
使用
.selected{
background: url("http://i62.tinypic.com/2vb8kn8.png");
z-index:99999;
height:25px;
width:25px'
}
这在jQuery中
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
使用
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$('.step_box img').fadeIn('fast');
$(this).addClass('selected');
$(this).find('img').fadeOut('fast');
});
答案 4 :(得分:0)
答案 5 :(得分:0)
您需要做的是
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).find("img").animate({opacity : 0},10)
$(this).addClass('selected')
});
答案 6 :(得分:-1)
你如何交换图像来源
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box img').attr('src','http://i59.tinypic.com/2lcvjlz.png');
$(this).find('img').attr('src','http://i.stack.imgur.com/0e6C3.png');
});