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

jquery点击改变class并toggle的更多相关文章

  1. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

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

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

  3. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  4. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  5. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  7. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  8. 基于jQuery点击缩略图右侧滑出大图特效

    基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

随机推荐

  1. BUY LOW, BUY LOWER_最长下降子序列

    Description The advice to "buy low" is half the formula to success in the bovine stock mar ...

  2. 2、网页制作Dreamweaver（图片热点、frameset框架）

    图片热点 1.方法: <img  usemap="名字"> <map name="名字"> <area shape="r ...

  3. Bootstrap组件On和Off语法

    $(document).on('click.bs.carousel.data-api','td',function(e){}) $(document).off('.carousel.data-api' ...

  4. IFrame 获取内容

    试试: iframe.contentwindow.document.documentElement.innerHTML   document.getElementById("MyIFrame ...

  5. 通过.htaccess文件让Magento加速

    Magento提速的方法很多,通 过.htaccess文件开启GZip压缩可以非常明显的让Magento加速.在Magento初始安装中已经包含了.htaccess文件,我们只需 要把.htacces ...

  6. 重装系统后删除Cygwin文件夹

    1.右键点要删除Cygwin 文件夹,依次选属性-安全-高级-所有者-编辑,将所有者改为你的登录帐户,勾选下方“替换子容器和对象的所有者”. 2.在 属性-安全-高级对话框中选 权限选项卡,点更改权限 ...

  7. Pike学习笔记

    Pike的安装(Ubuntu环境) pike的语法非常像C++,但是它也是脚本语言,所以具有一般脚本语言的特性.一个简单的pike程序,hello world: int main() { write( ...

  8. Day07_面向对象第二天

    1.构造方法(掌握) 1.构造方法的特点(掌握)      A.方法名必须和类名保持一致      B.没有返回值类型并且没有具体的返回值   2.构造方法的作用(掌握)       给对象的属性初始 ...

  9. Java Super 覆盖方法

    子类从父类中继承方法,有时候,子类需要修改父类中定义的方法的实现,这称作方法覆盖. 比如,GeometricObject类中的toString方法返回表示集合对象的字符串,这个方法就可以被覆盖,返回表 ...

  10. Source Xref 与 JavaDocs 学习理解

    最近学习Mybatis的官方文档,看到了[项目文档]一节有很多内容没有见过,做个笔记,理解一下. 没找到java相关代码的解释,其实用下面这个php版本解释,也非常不错. What is SOURCE ...