<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. JQuery源码分析（二）

    立即调用表达式: 任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题.jQuery就是利用了JavaScript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题. jQue ...

  2. ERP仓库管理系统（九）

    需求分析: 1.设计库房表,至少包括两个字段,库房名称,库房所属公司的ID(在客户资质审批表中找到对应公司的ID) 2.设计增.删.改.查一套程序,其中的删除要做限制,只要有库存数据存在则不允许删除对 ...

  3. Android CardView设置成普通的Framelayout

    比如可以这样写代码,CardView就变成普通的FrameLayout: <?xml version="1.0" encoding="utf-8"?> ...

  4. PHP 上传图片和安全处理

    上传图片 public function images() { $data = $_FILES['file']; switch($data['type']) { case 'image/jpeg': ...

  5. 如何运用inno在安装和卸载时提示用户结束进程？

    我尝试着写了一段,但是卸载段存在问题,请指点! CODE [Files]Source: ISTask.dll; DestDir: {app}; Flags: ignoreversion [Code]f ...

  6. html文字垂直居中

    比如一个div  需设置height的高度和line-height一样. <div style="height:30px;line-height:30px;"> OK. ...

  7. Word Ladder II

    Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transformat ...

  8. python, itertools模块

    通过itertools模块,可以用各种方式对数据进行循环操作 1, chain() from intertools import chain for i in chain([1,2,3], ('a', ...

  9. （基础篇）PHP与Web页面交互

    PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为 ...

  10. R编程感悟

    虽然大学阶段曾经学过C++, matlab等编程,但是真的几乎完全还给了老师- 所以,我一直将R 作为自己真正学习的第一门语言.我从2012年初在来美国的第二个rotation中开始接触到了R.当时不 ...