<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. 在config文件输入特殊字符

    今天遇到要在config文件中配置一个包含引号,尖括号的特殊字符的问题,config文件不支持转义字符,我开始发动自己的脑子想,想出一个蹩脚的方法,用其他的字符替换比如&,?,!,问题倒是解决 ...

  2. iOS开发 获取手机信息(UIDevice,NSBundle,NSlocale)

    在开发中,需要获取当前设备的一些信息,可以通过UIDevice,NSbundle,NSlocale获取. UIDevice UIDevice 提供了多种属性,类函数及状态通知,可以检测手机电量,定位, ...

  3. 14、SQL基础整理（存储过程）

    存储过程procedure(proc) 数据库—可编程性—存储过程 新建存储过程: create proc firstproc as select *from fenshu go 执行存储过程: 存储 ...

  4. Oracle存储过程基本语法

    一.形式 1 CREATE OR REPLACE PROCEDURE 存储过程名  //是一个SQL语句通知Oracle数据库去创建一个叫做skeleton存储过程, 如果存在就覆盖它; 2 IS   ...

  5. 【转】BAT及各大互联网公司2014前端笔试面试题：JavaScript篇

    原文转自:http://blog.jobbole.com/78738/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

  6. Struts2 OGNL使用详解（转）

    OGNL OGNL ( Object Graph Navigation Language ),对象图导航语言.这是一种强大的表达式语言,通过它可以非常方便的来操作对象属性. 在 Struts2 中,O ...

  7. platanus

    nohup  platanus assemble -o Larrrea -f ../unknown_NoIndex_L000_R1.fastq ../unknown_NoIndex_L000_R2.f ...

  8. htseq-count 的使用

    Given a file with aligned sequencing reads and a list of genomic features, a common task is to count ...

  9. jni数据传递——会不断的更新，测试没有问题，再整理进来。

    工作中遇到了ndk编程,其实核心就是java和本地的数据交互.现把所有数据类型的传递写成demo. 1,ini数组传递  我们实现传递8个数值过去,然后本地将八个数值放到数组,返回. java代码: ...

  10. ztong上机3

    二.实验名称:数字图像处理matlab上机 三.实验学时:2学时 四.实验目的:(详细填写) 掌握几何变换 掌握插值 理解配准的概念 五．实验内容 (1)首先自己写一个对图像进行旋转和缩放的复合变换程 ...