<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.bg1 {
    background-image:url(images/21.jpg);
    background-repeat:no-repeat;
    color:#0CF;
}
.bg2 {
    background-image:url(images/22.jpg);
    background-repeat:no-repeat;
    color:#F00;
}
</style>
<script type="text/javascript">
//参数para1：希望隐藏元素的id值
function toggle1(para1){
    if ($("#p2").attr("class")=="bg1")
    {
        $("#p2").attr("class","bg2");
    }
    else
    {
        $("#p2").attr("class","bg1");
    }
    $("#"+para1).toggle();
}
</script>
</head>
<body>
<p id="p1">此处将显示或隐藏</p>
<p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等）</p>
</body>

</html>

<!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>

<!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>无标题文档</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
//para1:要隐藏的元素的id
function toggle1(para1) {
    jQuery("#"+para1).toggle();
}
</script>
</head>

<body>
<p>点击div1，将在下面显示或隐藏div2</p>
<div onclick="toggle1('div2')" id="div1">div1</div>
<!-- 此处display默认为none，如果已开始要显示着，改为block  -->
<div id="div2" style="display:none">div2</div>
</body>
</html>

jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle的更多相关文章

  1. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  3. jquery源码解析：jQuery队列操作queue方法实现的原理

    我们先来看一下jQuery中有关队列操作的方法集: 从上图可以看出,既有静态方法,又有实例方法.queue方法,相当于数组中的push操作.dequeue相当于数组的shift操作.举个例子: fun ...

  4. jquery源码解析：jQuery静态属性对象support详解

    jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...

  5. jQuery源码分析之=>jQuery的定义

    最近写前段的代码比较多,jQuery是用的最多的一个对象,但是之前几次看了源码,都没搞清楚jQuery是怎么定义的,今天终于看明白怎么回事了.记录下来,算是一个新的开始吧. (文中源码都是jQuery ...

  6. jQuery使用（）：Deferred有状态的回调列表（含源码）

    deferred的功能及其使用 deferred的实现原理及模拟源码 一.deferred的功能及其使用 deferred的底层是基于callbacks实现的,建议再熟悉callbacks的内部机制前 ...

  7. FastAdmin 源码分析：jQuery 含逗号的选择器

    FastAdmin 源码分析:jQuery 含逗号的选择器 在 FastAdmin 你常常会看到以下 jQuery 选择器的代码. if ($(".datetimepicker", ...

  8. jQuery1.11源码分析(7)-----jQuery一些基本的API

    这篇文章比较繁杂,主要就是把jQuery源码从上到下列出来,看我的注释就好了. jQuery源码对各种加载器做了处理. //阅读这个源码是请先了解一下概念,即时函数,工厂模式 (function( g ...

  9. 三.jQuery源码解析之jQuery的框架图

    这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...

随机推荐

  1. tomcat maven book

    https://www.amazon.com/gp/aw/d/0596517335/ref=pd_aw_sim_14_3?ie=UTF8&psc=1&refRID=H34H0BX247 ...

  2. 用js实现导航菜单点击切换选中时高亮状态

    随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...

  3. python部分模块的安装

    scrapy http://www.cnblogs.com/txw1958/archive/2012/07/12/scrapy_installation_introduce.html pyHook - ...

  4. asp.net 程序，单击按钮时 同时实现打开页面并处理值

    来源:http://blog.csdn.net/nvhaixx/article/details/12430757 1)在网页中添加用于处理的客户端事件: <script language=&qu ...

  5. webqq协议请求交互过程

    1.http://my.oschina.net/ij2ee/blog/191692 2.http://www.qqxieyi.com/fenxi_show.asp?id=34

  6. 将war文件解压到指定目录

    问:如何将.war文件解压到指定目录? 答:jar命令没有这样的选项. eg:将abc.war解压到当前文件夹? 答:进入目标文件即abc.war文件所在的文件夹,按住shift键并在该文件夹空白处点 ...

  7. [原]在Fedora 20环境下安装系统内核源代码

    1.安装Kernel Headers(头文件) 通过安装kernel-devel RPM包就可以得到Kernel Headers,但默认情况下没有被Fedora 20安装.通过DVD ISO 或者 y ...

  8. OC-字典

    1.所有的key都是一个字符串,键 值是成对出现的.且都不能为空,非要为空要使用NSnull.字典是通过key来存取值的,key valu必须成对出场 2.字典是有键-值的数据组合,通过key查找对于 ...

  9. 【jmeter】测试报告优化<一>

    具体问题如下: 1.Date report这里的时间没有正确显示出来 2.Summary里的字段Min Time和Max Time显示的是NaN,没有显示正确的时间. 本文主要解决上述两个问题,具体报 ...

  10. Redis-sentinel监控

    Sentinel介绍 Redis的 Sentinel 系统用于管理多个Redis服务器, 该系统执行以下三个任务: 监控(Monitoring) 提醒(Notification) 自动故障迁移(Aut ...