jquery点击toggle并改变图片src源码

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

山水一程2050

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

阅读量2.6k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/cag/article/details/50257301

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击toggle并改变图标src</title>
</head>
<script src="images/jquery-1.8.3.min.js"></script> 
<script>
//函数实现
//参数para1：希望隐藏元素的id
//参数para2：希望改变图片src的img的id
/*
function toggle1(para1,para2){
	if($("#"+para2).attr("src")=="images/col_24.jpg")
	{
		$("#"+para2).attr("src","images/col_11.jpg");
	}
	else
	{
		$("#"+para2).attr("src","images/col_24.jpg");
	}
	$("#"+para1).toggle();
}
*/
//jquery闭包实现
(function($){
	$(document).ready(function(){
		$("#div1").click(function(){
			if($("#img1").attr("src")=="images/col_24.jpg")
			{
				$("#img1").attr("src","images/col_11.jpg");
			}
			else
			{
				$("#img1").attr("src","images/col_24.jpg");
			}
			$("#p1").toggle();	
		});
		$("#div2").click(function(){
			if($("#img2").attr("src")=="images/col_24.jpg")
			{
				$("#img2").attr("src","images/col_11.jpg");
			}
			else
			{
				$("#img2").attr("src","images/col_24.jpg");
			}
			$("#p2").toggle();	
		});
	});
})(jQuery);
</script>
<body>
<!-- 函数实现html代码部分 -->
<!--
<div id="div1" οnclick="toggle1('p1','img1')" style="width:350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>
<p id="p1">要隐藏的p1</p>
<div id="div2" οnclick="toggle1('p2','img2')" style="width:350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px"  />点击此处，隐藏下面的p2并改变图标src</div>
<p id="p2">要隐藏的p2</p>
-->
<!-- 闭包实现html代码部分 -->
<div id="div1" style="width:350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>
<p id="p1">要隐藏的p1</p>
<div id="div2" style="width:350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="images/col_24.jpg" style=" padding-left:20px; padding-right:20px"  />点击此处，隐藏下面的p2并改变图标src</div>
<p id="p2">要隐藏的p2</p>
</body>
</html>

源码下载：http://download.csdn.net/detail/cag/9345695

山水一程2050

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery点击toggle并改变图片src源码

jquery点击toggle并改变图标src //函数实现//参数para1：希望隐藏元素的id//参数para2：希望改变图片src的img的id/*function toggle1(para1,para2){ if($("#"+para2).attr("src")=="images/col_24.jpg") { $("#"+para2).attr("src","imag
复制链接

扫一扫