<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. thinkphp3.2 学习

    http://www.tuicool.com/articles/nQFnQrR 1,sublime text 增强插件 右键可以打开文件目录 http://www.w3cfuns.com/notes/ ...

  2. uploadify上传

     一.上传按钮样式 1.1id="show_filebutton"是显示给用户操作按钮,id="filebutton"是flash上传按钮完成用户上传操作.id ...

  3. MySQL DBA的个人修养

    做为一个MySQL DBA,必须具有以下的素质: 一, 身体素质 DBA必须接收和处理各种报警,不论是中午在吃饭或者凌晨三点已经进入深度睡眠.接到报警需要立即进入应急状态,找到电脑,联上网络,快速定位 ...

  4. requests

    >>>import requests>>> r = requests.get('http://www.zhidaow.com')  # 发送请求>>&g ...

  5. linux 安装phpMyAdmin

    1. 首先安装 php mysql  nginx 2. 下载phpMyadmin wget  http://sourceforge.net/projects/phpmyadmin/files/phpM ...

  6. 写window应用程序日志System.Diagnostics.EventLog.WriteEntry

    System.Diagnostics.EventLog.WriteEntry( MySource , Writing to event log. ); 可以写window应用程序日志 查看的地方:右击 ...

  7. maxscript，MAXScript Listener下输入print "hi"为什么输出两次

    第一次是print "hi"的输出,第二次是print "hi" 的返回值被输出. 参考:https://davewortley.wordpress.com/2 ...

  8. 【转】3篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：官方原生方法分析

    作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  9. Innodb 存储引擎（转)

    第一部分:线程 Innodb是一个多线程的,各个线程负责不同的任务.主要的线程有:Master Thread.IO Thread.Purge Thread.Page Cleaner Thread. 一 ...

  10. 程序员书单_HeadFirst系列

    Head First Jquery(中文版),完整扫描版 http://download.csdn.net/detail/shenzhq1980/9103615 Head First Python(完 ...