左右div内容互换（单击左边div里的一项内容，此内容变没，跑到右边div中）

最新推荐文章于 2023-03-20 10:47:50 发布

紫雪璇雨

最新推荐文章于 2023-03-20 10:47:50 发布

阅读量3k

点赞数

分类专栏： jQuery 文章标签：左右div内容互换 appendTo jquery

本文链接：https://blog.csdn.net/ly2983068126/article/details/49273279

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

昨天重构页面，发现个小问题，算是电子商务常见的一种效果吧，在网上找了好久没有找到，后来就自己用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>

紫雪璇雨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
左右div内容互换（单击左边div里的一项内容，此内容变没，跑到右边div中）

昨天重构页面，发现个小问题，算是电子商务常见的一种效果吧，在网上找了好久没有找到，后来就自己用jQuery写了出来，但是还是有点小问题：单击左边div中的内容，此内容跑到右边div中，但是在单击右边div中的此内容它是回不到左边div的，大家有什么好的建议希望提出来，完善这个效果，我先谢谢大家了！replaceWith()如果把这个去掉，当点击left中所有元素时，他们会跑到r
复制链接

扫一扫