用jQuery划分其他div

时间:2013-01-22 15:21:24

标签: javascript jquery html css

<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 ?

3 个答案:

答案 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

jsBin demo

$('#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 });
});

http://api.jquery.com/offset/

DOCS: http://api.jquery.com/(请务必阅读。这些是您的工具!)

答案 1 :(得分:0)

有大约一百万种不同的方法,我选择的方法是将#one#two包裹在相对定位的div中并将#two移至0X0点击

更新了你的小提琴:

http://jsfiddle.net/g6Myb/1/

#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');
});