<!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. swift系统学习第三章

    第九节:结构体-sturt //: Playground - noun: a place where people can play import UIKit /* swift学习第九节 结构体:st ...

  2. 定时同步时间与crontab

    date 月日时分年.秒date -s可以直接设置系统时间 比如将系统时间设定成1996年6月10日的命令如下.#date -s 06/10/96将系统时间设定成下午1点12分0秒的命令如下.#dat ...

  3. 5、网页制作Dreamweaver（JS的初步运用）

    JAVASCRIPT *放在头部也可以读取(最先读取头部) 表单提交时会自动刷新网页,最好关掉 写法: 1.输出 <script> document.write("hello w ...

  4. oracle 修改字段类型的方法（转）

    今天公司因为业务需要,修要修改某个字段数据类型有number(5),变为number(5,2)型 要是没有数据的话直接用以下语句即可 alter   table  tb_test  modify pe ...

  5. 第三周总结PSP日志文件

    项目计划 时间记录 缺陷记录 结对编程伙伴:李妍 20133099 博客地址:http://www.cnblogs.com/liyan-luckygirl/

  6. windows系统mysql定时自动备份

    MySQL Administrator 工具是MySQL官方的数据库管理工具,包含在MySQL GUI Tools中,可在MySQL官方网站下载到,下载地址:http://dev.mysql.com/ ...

  7. [转]SQLITE3 C语言接口 API 函数简介

    SQLITE3 C语言接口 API 函数简介 说明:本说明文档属作者从接触 SQLite 开始认识的 API 函数的使用方法, 由本人翻译, 不断更新. /* 2012-05-25 */ int sq ...

  8. 搬家后Magento前台只有产品的缩略图不显示

    第一种可能:缓存不足 http://blog.csdn.net/ddjohn/article/details/6648199 最近发现一个怪异的现象,Magento前台只有产品的缩略图不显示.我检查了 ...

  9. 【avalon源码】

    1. document.getElementsByTagName('head')[0] document.head 2. 3. var IEVersion = NaN if (window.VBArr ...

  10. 简单的将内容加入到drupal的主页面

    首先要管理员用户 然后进入结构目录 进入菜单项 在main行 选择 列出list 选择添加链接 完善信息 保存即可 eg: http://peach.fafu.edu.cn/ 将papaya的jbro ...