87,997
社区成员
发帖
与我相关
我的任务
分享div的应用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#div1,#div2 {width:550px;height:565px;overflow-y:scroll;border:1px solid #000;overflow-style:marquee,panner;}
#div2{ position:absolute;left:720px;top:28px;}
#hk2,#hk1,#hk3,#hk4,#hk5,#hk6{width:158px;height:180px;padding-left:10px;margin:2px;
background-color:#eee;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;float:left;}
.bn1,.bn2{ width:85px;height:31px; border:none;outline:none;cursor:pointer;background:url(bn.png) left top no-repeat;color:#fff;font-size:16px;font-weight:bold;}
.bn1{ position:absolute;left:600px;top:180px;}
.bn2{ position:absolute;left:600px;top:260px}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="doy">
<div id="div1">
<div id="hk1" >
</div>
<div id="hk2" >
</div>
<div id="hk3" >
</div>
<div id="hk4" >
</div>
<div id="hk5" >
</div>
<div id="hk6" >
</div>
</div>
<div id="div2">
</div>
<!--点击-->
<input type="button" class="bn1" onclick="left_click()" value=">">
<input type="button" class="bn2" onclick="right_click()" value="<">
</body>
</html>我想点击左边的任意一个或者多个框，点击一下就改变其颜色 在点击中间的按钮 进行左右移动调换。求高手帮助。。。
...全文
请发表友善的回复…
发表回复
wen19910312 2015-09-02
- 打赏
- 举报
大哥 。。。我的意思是说 把左边的移到右边新创建 这个是对的。但是从右边移到左边，要消除的是新创建的，不是移过去的。还有新创建的不能点，有提示不能点？求帮助。。。
slwsss 2015-09-01
- 打赏
- 举报
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#div1,#div2 {width:550px;height:565px;overflow-y:scroll;border:1px solid #000;overflow-style:marquee,panner;}
#div2{ position:absolute;left:720px;top:28px;}
#hk2,#hk1,#hk3,#hk4,#hk5,#hk6{width:158px;height:180px;padding-left:10px;margin:2px;
background-color:#eee;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;float:left;}
.bn1,.bn2{ width:85px;height:31px; border:none;outline:none;cursor:pointer;background:url(bn.png) left top no-repeat;color:#fff;font-size:16px;font-weight:bold;}
.bn1{ position:absolute;left:600px;top:180px;}
.bn2{ position:absolute;left:600px;top:260px}
.aaa{background:red!important;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="doy">
<div id="div1">
<div id="hk1" >
</div>
<div id="hk2" >
</div>
<div id="hk3" >
</div>
<div id="hk4" >
</div>
<div id="hk5" >
</div>
<div id="hk6" >
</div>
</div>
<div id="div2">
</div>
<!--点击-->
<input type="button" class="bn1" onclick="left_click()" value=">">
<input type="button" class="bn2" onclick="right_click()" value="<">
</body>
</html>
<script>
$('#div1,#div2').on('click','div',function(){$(this)[$(this).hasClass('aaa')?'removeClass':'addClass']('aaa')})
function left_click(){
var a=$('#div1 .aaa').appendTo('#div2').removeClass('aaa').length;
var s='';
for(var i=0;i<a;i++)s+='<div id="hk1" > </div>'
$('#div1').append(s)
}
function right_click(){
//$('#div2 .aaa').appendTo('#div1').removeClass('aaa');$($)
$('#div2 .aaa').remove()
}
</script>wen19910312 2015-09-01
- 打赏
- 举报
如果我想 每一个移动过去的div 都新生成一个div。但是移回来又消除新生成的。 怎么做？
slwsss 2015-09-01
- 打赏
- 举报
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#div1,#div2 {width:550px;height:565px;overflow-y:scroll;border:1px solid #000;overflow-style:marquee,panner;}
#div2{ position:absolute;left:720px;top:28px;}
#hk2,#hk1,#hk3,#hk4,#hk5,#hk6{width:158px;height:180px;padding-left:10px;margin:2px;
background-color:#eee;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;float:left;}
.bn1,.bn2{ width:85px;height:31px; border:none;outline:none;cursor:pointer;background:url(bn.png) left top no-repeat;color:#fff;font-size:16px;font-weight:bold;}
.bn1{ position:absolute;left:600px;top:180px;}
.bn2{ position:absolute;left:600px;top:260px}
.aaa{background:red!important;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="doy">
<div id="div1">
<div id="hk1" >
</div>
<div id="hk2" >
</div>
<div id="hk3" >
</div>
<div id="hk4" >
</div>
<div id="hk5" >
</div>
<div id="hk6" >
</div>
</div>
<div id="div2">
</div>
<!--点击-->
<input type="button" class="bn1" onclick="left_click()" value=">">
<input type="button" class="bn2" onclick="right_click()" value="<">
</body>
</html>
<script>
$('#div1,#div2').on('click','div',function(){$(this).addClass('aaa')})
function left_click(){
$('#div1 .aaa').appendTo('#div2').removeClass('aaa')
}
function right_click(){
$('#div2 .aaa').appendTo('#div1').removeClass('aaa')
}
</script>
