昨天重构页面,发现个小问题,算是电子商务常见的一种效果吧,在网上找了好久没有找到,后来就自己用jQuery写了出来,但是还是有点小问题:单击左边div中的内容,此内容跑到右边div中,但是在单击右边div中的此内容它是回不到左边div的,大家有什么好的建议希望提出来,完善这个效果,我先谢谢大家了!
replaceWith()
如果把这个去掉,当点击left中所有元素时,他们会跑到right里,当你再单击right里的left1、left2、left3、left4时,他们会排序的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左右切换效果</title>
<style type="text/css">
.l-r{padding: 0;margin: 0;border-top: #ddd solid 1px;}
.lr_left,.lr_right,.l-r img{float: left;margin-left: 30px;}
.l-r img{padding-top: 50px;}
.lr_left ul,.lr_right ul{width: 150px;height: 250px;border: #ddd solid 1px;list-style: none;overflow: auto;}
.lr_left ul li,.lr_right ul li{line-height: 30px;}
.lr_left ul li a,.lr_right ul li a{color: #333;text-decoration: none;}
</style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
$(".l-r .lr_left li").click(function(){
$(this).replaceWith().appendTo(".lr_right ul");
});
$(".l-r .lr_right li").click(function(){
$(this).replaceWith().appendTo(".lr_left ul");
});
});
</script>
</head>
<body>
<div class="l-r">
<div class="lr_left">
<p>left</p>
<ul>
<li><a href="#">left1</a></li>
<li><a href="#">left2</a></li>
<li><a href="#">left3</a></li>
<li><a href="#">left4</a></li>
<li><a href="#">left4</a></li>
<li><a href="#">left4</a></li>
<li><a href="#">left4</a></li>
<li><a href="#">left4</a></li>
<li><a href="#">left4</a></li>
<li><a href="#">left4</a></li>
</ul>
</div>
<img src="img/jt.png" />
<div class="lr_right">
<p>right</p>
<ul>
<li><a href="#">right1</a></li>
<li><a href="#">right2</a></li>
<li><a href="#">right3</a></li>
<li><a href="#">right4</a></li>
</ul>
</div>
</div>
</body>
</html>