jquery点击改变图片src源码并toggle
<!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的更多相关文章
- jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- jQuery 2.1.4版本的源码分析
jQuery 2.1.4版本的源码分析 jquery中获取元素的源码分析 jQuery.each({// 获取当前元素的父级元素 parent: function(elem) { var parent ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- jQuery实现DOM加载方法源码分析
传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... } 但 ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- jQuery deferred应用之ajax详细源码分析(二)
在上一节中,我只贴出了$.Deferred的源码分析,并没用讲解怎么使用它,现在我们先看看$.ajax是如何使用它,让我们进行异步任务的处理. 如果没看上节的代码,请先稍微了解一下jQuery Def ...
- 一个基于jQuery写的弹窗效果(附源码)
最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...
随机推荐
- HDU 3966 (树链剖分+线段树)
Problem Aragorn's Story (HDU 3966) 题目大意 给定一颗树,有点权. 要求支持两种操作,将一条路径上的所有点权值增加或减少ai,询问某点的权值. 解题分析 树链剖分模板 ...
- HDU 1053 & HDU 2527 哈夫曼编码
http://acm.hdu.edu.cn/showproblem.php?pid=1053 #include <iostream> #include <cstdio> #in ...
- magento日常使用
magento order number长度(修改)设置 2013年3月15日星期五 Asia/Shanghai上午10时22分02秒 1-进入要修改的该网站的数据库:2-找到表名:eav_entit ...
- 第二个Sprint冲刺第二天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 任务:解决了第二个Sprint冲刺第一天遇到的错误. 燃尽图: 遇到的问题: 解决之后: 开发感悟:最近一直在写代码,都很少外出活动了,不知不觉 ...
- cannot find -lgcc_s
在64位centos6上编译32位的汇编程序,如果程序中使用了C库,比如printf.因为是编译32位的目标程序,所以使用gcc编译的时候需要加上-m32选项,但是如果编译的话会报错,以print.s ...
- Hooks
function getValType(elem) { var ret = elem.tagName.toLowerCase() return ret === "input" &a ...
- 继承自CCObject的对象成员变量出错或者为空的问题
写了个类想让其作为某种数据集合,还可以自动销毁,所以就直接继承了最底层的CCObject,所以并不属于视图,也就不会被addChild到显示列表里,于是就造成了接下来遇到的一个情况:其所有的成员变量被 ...
- postgresql存储二进制大数据文件
如果想把整个文件或图片存储在数据表的一个字段内,该字段可以选择二进制类型,然后将文件按二进制存储起来,文本文件也可以存在text字段内. 示例如下: 二进制类型bytea的操作(在最大值内,有内存限制 ...
- B3log部署文档
https://github.com/b3log/solo/wiki/standalone_mode 独立模式 只要已经安装好了 Java 环境,一个命令就能启动! 不依赖 MySQL 数据库,而是使 ...
- 使用AjaxPro
1:后台注册 protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(ty ...