多个图片切换src地址（点击当前图片切换src地址，其他图片仍为默认的状态）

最新推荐文章于 2022-12-03 23:29:34 发布

E_SSY

最新推荐文章于 2022-12-03 23:29:34 发布

阅读量1.4k

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/E_SSY/article/details/80017861

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>


	<body>
		<ul class="showSocialList">
			<li>
				<a href="#"><img class="abc" src="images/link0_p.png" durl="images/link0_p.png" data-url="images/link0.png"/></a>
			</li>
			<li>
				<a href="#"><img class="abc" src="images/link1_p.png" durl="images/link1_p.png" data-url="images/link1.png"/></a>
			</li>
			<li>
				<a href="#"><img class="abc" src="images/link2_p.png" durl="images/link2_p.png" data-url="images/link2.png"/></a>
			</li>
		</ul>
	</body>


</html>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">


	//更换底部图片的src
	$('.showSocialList li a img').click(function() {
		$(".abc").each(function(){
			dUrl = $(this).attr('durl');
			$(this)[0].src = dUrl;
		})
		dataUrl1 = $(this).attr('data-url');
		$(this)[0].src = dataUrl1;
	});
</script>