<!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. IDataReader转换成list通用方法

    public static IList<T> ReaderToList<T>(this IDataReader dr) { //DateTime dt = DateTime.N ...

  2. DBImg: 图片文件-二进制文件的转换

    using System; using System.IO; using System.Drawing; //using System.Collections.Generic; //using Sys ...

  3. Core Data入门

    简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象. ...

  4. wrk中的lua脚本(转)

    转载地址:http://www.tuicool.com/articles/IFjIJjU wrk是一款现代化的http压测工具,提供lua脚本的功能可以满足每个请求或部分请求的差异化. wrk中执行h ...

  5. Linux 下网络性能优化方法简析

    概述 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性能的优化则可基于这 3 条路径来考虑.由于数据包的转发一般是具备路由功能的设备所关注,在本文中 ...

  6. （基础篇）PHP与Web页面交互

    PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为 ...

  7. （基础篇）PHP字符串函数

    1查找字符位置函数:   strpos($str,search,[int]):查找search在$str中的第一次位置从int开始: stripos($str,search,[int]):函数返回字符 ...

  8. mysql样例数据库employees

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

  9. twisted 初体验

    前言: 最近帮朋友review其模块服务代码, 使用的是python的twisted网络框架. 鉴于之前并没有使用过, 于是决定好好研究一番. 个人接触最早的高性能网络编程框架是Mina, 所谓先入为 ...

  10. ZPPR016-在制品清单报表

    *&---------------------------------------------------------------------**& Report ZPPR016*&a ...