<div id="one">aaa</div>
<div id="two">bbbbbbbbbb</div>
<span id="click">click</span>
FIDDLE:http://jsfiddle.net/g6Myb/
点击span#click?
后如何获得#two并使用jQuery将其置于#one上<div id="one">aaa</div>
<div id="two">bbbbbbbbbb</div>
<span id="click">click</span>
#one {width: 200px; height: 200px; background-color: red}
#two {width: 200px; height: 200px; background-color: green; opacity: 0.3 }
$('.click').click(function(){}) // what to do here ?
答案 0 :(得分:0)
您的目标是一个类而不是ID
$('.click').click(function(){});
^----- USE #
比你可以使用这种方法:
http://api.jquery.com/append/
http://api.jquery.com/appendto/
示例:
$('#click').click(function(){
$('#one').append( $('#two') );
});
$('#click').click(function(){
$('#two').appendTo( $('#one') );
});
如果您的元素包含文本,则可能不是您想要的方法...
所以,如果您希望 OVERLAY #two
超过#one
而不是offset
:
$('#click').click(function(){
var TWOpos = $('#one').offset();
var pos = {X: TWOpos.left, Y:TWOpos.top };
$('#two').css({position:'absolute', left:pos.X, top:pos.Y });
});
DOCS: http://api.jquery.com/(请务必阅读。这些是您的工具!)
答案 1 :(得分:0)
有大约一百万种不同的方法,我选择的方法是将#one
和#two
包裹在相对定位的div
中并将#two
移至0X0点击
更新了你的小提琴:
#one {width: 200px; height: 200px; background-color: red}
#two {width: 200px; height: 200px; background-color: green; opacity: 0.3 }
#wrapper{position: relative;}
#two.on{position: absolute; top:0; left:0;}
$('#click').click(function(){
$("#two").addClass("on");
})
答案 2 :(得分:0)
您需要创建一个新的CSS类:
.hoverOpacity{
position:absolute;
top: 0; //or wherever you want to put it
right: 0; //or whereever you want to put it
opacity: .5; //plus all the browser specific
}
然后点击,将此类添加到div:
$('#click').click(function(){
$('#two').addClass('hoverOpacity');
});