<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. C++ vector和list的区别

    1.vector数据结构vector和数组类似,拥有一段连续的内存空间,并且起始地址不变.因此能高效的进行随机存取,时间复杂度为o(1);但因为内存空间是连续的,所以在进行插入和删除操作时,会造成内存 ...

  2. PHP 堆排序实现

    在<算法: C语言实现>上看到的写法,很简洁,用PHP实现一把. <?php /* fixDown实现对某一个节点的向下调整,这里默认的是起始节点为1,方便计算父子节点关系 注: 起 ...

  3. HttpModule和Http Handler (比较与区别)

    HttpModule和Http Handler (比较与区别) HttpModule概述 暂时先不考虑我们自己实现Http Module的情况.在.Net中,Http Module 是实现了IHttp ...

  4. 使用git pull文件时和本地文件冲突怎么办？

    同事在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息: error: Your local changes to 'c/environ.c' would be overwritten ...

  5. Mac安装Appium

    通过淘宝镜像安装 npm --registry http://registry.cnpmjs.org install -g appium 如果提示权限不够的话,需要加sudo,并输入对应密码 sudo ...

  6. Tkinter颜色方案举例

    效果图: 示例代码: # _*_ coding: utf-8 _*_ from Tkinter import * colors = '''#FFB6C1 LightPink 浅粉红 ,#FFC0CB ...

  7. Window下SVN命令的使用总结

    1 地址:http://subversion.apache.org/packages.html#windows 找到windows下的svn客户端工具.选择Win32Svn 进行安装. 一般环境变量会 ...

  8. 关于checkbox的attr无效的问题

    jq用了10版本的,一直发现attr无效,查找良久,由同事帮忙解决该问题,感谢. 特记录下该问题. 由于 新版本attr换成了prop的问题. $("input[name='delIds'] ...

  9. HackerRank "Median Updates"

    Same as LintCode "Sliding Window Median", but requires more care on details - no trailing ...

  10. (转)Edge实现NodeJS与.NET互操作(包括UI界面示例)

    本文转载自:http://blog.csdn.net/kimmking/article/details/42708049 1.  Edge是什么 Edge是一种在进程内实现NodeJS与.NET互操作 ...