<!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="data: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')" style="width:350px;background-color:#0F3; height:30px; vertical-align:middle; line-height:30px;"><img id="img1" src="data:images/col_24.jpg" style=" padding-left:20px; padding-right:20px" />点击此处，隐藏下面的p1并改变图标src</div>

<p id="p1">要隐藏的p1</p>

<div id="div2" onclick="toggle1('p2','img2')" style="width:350px;background-color:#F00; height:30px; vertical-align:middle; line-height:30px;"><img id="img2" src="data: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="data: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="data:images/col_24.jpg" style=" padding-left:20px; padding-right:20px"  />点击此处，隐藏下面的p2并改变图标src</div>

<p id="p2">要隐藏的p2</p>

</body>

</html>

jquery点击改变图片src源码并toggle的更多相关文章

  1. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  2. jQuery 2.1.4版本的源码分析

    jQuery 2.1.4版本的源码分析 jquery中获取元素的源码分析 jQuery.each({// 获取当前元素的父级元素 parent: function(elem) { var parent ...

  3. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  4. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  5. jQuery实现DOM加载方法源码分析

    传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但 ...

  6. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  7. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  8. jQuery deferred应用之ajax详细源码分析（二）

    在上一节中,我只贴出了$.Deferred的源码分析,并没用讲解怎么使用它,现在我们先看看$.ajax是如何使用它,让我们进行异步任务的处理. 如果没看上节的代码,请先稍微了解一下jQuery Def ...

  9. 一个基于jQuery写的弹窗效果(附源码)

    最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...

随机推荐

  1. 第一次div1做出3道题

    第一次div1做出3道题! 再接再厉! 哈利路亚!

  2. Linux性能监控

    转自:http://blog.csdn.net/chosen0ne/article/details/8200737 linux性能监控,就是要监控系统的各个子系统是否正常.linux主要的子系统包括: ...

  3. isFinite

    window.isFinite 如果 number 是有限数字(或可转换为有限数字),那么返回 true.否则,如果 number 是 NaN(非数字),或者是正.负无穷大的数,则返回 false

  4. Note Pad++ 关闭语法错误时在代码下面的红线标识

    菜单栏 —- 插件 —- DSpellCheck . 将勾去掉即可

  5. 使用Jmeter测试MySQL性能——(1)连接配置

    在搭建MySQL集群之后需要测试集群的性能究竟如何,采用Apache的测试工具Jmeter进行测试,本文主要介绍主要实现Jmeter配置连接到MySQL. 安装相应的软件 首先Jmeter是基于Jav ...

  6. 用jquery ,当改变窗口或屏幕大小时调用function,用哪个事件?

    $(window).resize(function(){ //process here}); window的onresize事件. $(window).resize(function () {     ...

  7. 2层Folder删除问题，父文件夹删不掉

    在此用的是由内向外删除.文件结构是:父文件夹/子文件夹/文件.用的是java1.6的java.io.FIle#deleteFile(); 在删除的过程中,发现,文件删除的时候没有问题,但是在子文件夹删 ...

  8. mysql 5.5及以前版本的编码问题“Incorrect string value: '\xE6\x9B\xB9\xE5\x86\xAC...' for column 'realname' at row 1”

    遇到这个问题,所有的编码都设为utf8了,还是没有用,各种乱码,后来发现这是mysql自己的问题,它在5.5及之前的版本只支持3字节的utf8编码,出现4字节的utf编码时出现错误,参考: http: ...

  9. LB负载均衡集群及DR模式配置

    一.系统环境准备: 1.dir服务器 主机名称:dir 系统环境:CentOS release 6.5 (Final) 外网ip:192.168.1.203(网络模式桥接) vip:192.168.1 ...

  10. Fortran编译多个文件（转载）

    最近需要在Linux系统下编译多个Fortran程序,在网上搜索了一下,但是资料不多,也许因为这个问题比较简单,不值一提,但还是把我知道的写出来,供大家参考: 方法一: 假如现在有两个Fortran程 ...