<!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. 转：服务器控件的 ID,ClientID,UniqueID 的区别

    动态加载用户控件的怪问题 动态加载用户控件的时候,会因为调用一些控件的一些属性和方法而造成控件命名混乱. 因为add 一个用户控件或者 loadcontrol 的时候 如果没有指定控件的id,clie ...

  2. Redis 3.0 集群搭建

    Redis 3.0 集群搭建 开启两个虚拟机 分别在两个虚拟机上开启3个Redis实例 3主3从两个虚拟机里的实例互为主备 下面分别在两个虚拟机上安装,网络设置参照codis集群的前两个主机 分别关闭 ...

  3. linux/windows 下kill某个pid的进程

    [linux环境] 方法1:截取进程pid,再kill ps -ef | grep java.endorsed.dirs | grep -v grep | cut -c10-15 | xargs ki ...

  4. AC自动机 专题

    // 求目标串中出现了几个模式串 //==================== #include <stdio.h> #include <algorithm> #include ...

  5. Spring事务配置的五种方式 -- 越往后需要Spring版本越高

    第五种 基本零配置  个人感觉第四种也可以 Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式, ...

  6. zBoot/Makefile

    #上层makefile调用执行make命令,执行的应该是第一个目标allHEAD = head.oSYSTEM = ../tools/zSystem#LD = gcc#TEST = -DTEST_DR ...

  7. ztong上机3

    二.实验名称:数字图像处理matlab上机 三.实验学时:2学时 四.实验目的:(详细填写) 掌握几何变换 掌握插值 理解配准的概念 五．实验内容 (1)首先自己写一个对图像进行旋转和缩放的复合变换程 ...

  8. 关押罪犯（2010年NOIP全国联赛提高组）

    题目描述 Description S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极 不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用&qu ...

  9. hihoCoder #1301 : 筑地市场 （打表+构造）

    题目大意:问含有4或者7的第k大的正数是多少. 题目分析:1~10.1~100.1~1000...之间的含有4或者7的个数可以求出,这样就可以从高位到地位依次确定这个数的每一位上的值. 代码如下: # ...

  10. IE6 7 8BUG锦集

    1.浮动元素的双倍margin 说明:这是IE6及其以下版本的一个经典的BUG,触发这个BUG产生的条件是给元素设置了浮动并且同一方向设置了margin值.来看以下代码: <style type ...