<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. ExpressRoute

    Extending Your Network to Microsoft Azure Using ExpressRoute https://channel9.msdn.com/events/TechEd ...

  2. 正则表达式 ——python 基础

    一.引言 正则表达式是含有文本和特别字符的字符串,这些文本和特别字符描述的模式可以识别各种字符串. 正则表达式的强大之处在于特殊符号的应用,特殊符号定义了字符集合.子组匹配,模式重复次数...正是这些 ...

  3. linux服务之rsyslog

    日志片断分析 systemd:服务报出来的信息kvm:内核模块kvm报出来的信息kernel: tun: 内核的tun模块报出来的信息kernel: br0: 内核的br0模块报出来的信息kernel ...

  4. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  5. OpenJudge计算概论-计算书费

    /*============================================== 计算书费 总时间限制: 1000ms 内存限制: 65536kB 描述 下面是一个图书的单价表: 计算 ...

  6. WCF Client is Open Source

    WCF Client is Open Source Wednesday, May 20, 2015 Announcement New Project WCF We’re excited to anno ...

  7. MySQL 体系结构以及各种文件类型学习汇总 (转)

    1,mysql体系结构 由数据库和数据库实例组成,是单进场多线程架构. 数据库:物理操作系统文件或者其它文件的集合,在mysql中,数据库文件可以是frm.myd.myi.ibd等结尾的文件,当使用n ...

  8. Redis配制说明

    配置文件参数说明:  1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程     daemonize no 2. 当Redis以守护进程方式运行时,Redis默 ...

  9. jquery 设置select 默认值

    $('#@(Perfix)OrgType').children("option").each(function () { var temp_value = $(this).val( ...

  10. sqlite 下载的 ZIP 包的区别

    https://system.data.sqlite.org/index.html/doc/trunk/www/downloads.wiki sqlite-netFx20-binary-bundle- ...