你的位置:首页 > Java教程

[Java教程]jquery点击改变图片src源码并toggle


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="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" onclick="toggle1('p1','img1')" ><img id="img1" src="images/col_24.jpg" />点击此处,隐藏下面的p1并改变图标src</div><p id="p1">要隐藏的p1</p><div id="div2" onclick="toggle1('p2','img2')" ><img id="img2" src="images/col_24.jpg"  />点击此处,隐藏下面的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>