<!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. vs中附加IIS进程的调试方法

    项目运行以管理员的身份进行运行否则附加不进去:

  2. Magento怎么设置和使用Cookie和Session?

    Magento中cookie和session是已经封装了的 Magento的核心对象-Mage_Core_Model_Cookie & Mage_Core_Model_Session Mage ...

  3. java学习第八天

    第九次课 目标 1.  多态 2.  抽象类 3.  接口 4.  内部类(了解) 一.多态polymorphism 追求”高内聚低耦合”通过三大特性: 封装继承及多态来实现. 多态:多种形态,”出去 ...

  4. uninstall gitlab

    Stop gitlab and remove its supervision process sudo gitlab-ctl uninstall Debian/Ubuntu sudo dpkg -r ...

  5. 在虚拟上安装kali

    1.创建新的虚拟机 2.选择典型 下一步 3.选安装程序光盘映像文件:写入自己.iso的位置 4.linux--Ubuntu 5.给虚拟机名称 虚拟机在你电脑的位置 6.最大自盘自己定义 7.选自定义 ...

  6. 三分钟了解Activity工作流

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...

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

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

  8. mysql样例数据库employees

    Oracle和sqlserver都有基于员工信息的样例数据库,同样mysql上也是有的. 给出一个连接地址https://github.com/datacharmer/test_db. 下载后直接调用 ...

  9. nginx服务配置---php服务接入

    前言: 最近要搭建一个内部的wiki系统, 网上搜了一圈, 也从知乎上搜集了一些大神的评价和推荐. 重点找了几个开源的wiki系统, 不过发现他们都是采用php来实现的. 于是乎需要配置php环境, ...

  10. [转载]NoSQL by Martin Flower

    ============================================================== URL1 nosql ========================== ...