<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多库共存处理 多库共存换句话说可以叫无冲突处理. 总的来说会有2种情况会遇到: 1.$太火热,jQuery采用$作为命名空间,不免会与别的库框架或者插件相冲突. 2.jQuery版本更新太 ...

  2. HDU 5644 (费用流）

    Problem King's Pilots (HDU 5644) 题目大意 举办一次持续n天的飞行表演,第i天需要Pi个飞行员.共有m种休假计划,每个飞行员表演1次后,需要休假Si天,并提供Ti报酬来 ...

  3. 30道四则运算<2>单元测试

    该测试未实现除法 该测试中间多了/)两个符号,而且没有等号和回车. 该测试也没有符合除法要求 该测试也没有满足除法要求 该测试满足要求. 总结:程序中涉及到有除法的输出都有问题,多次改正未果:其他条件 ...

  4. JS回车键处理

    HTML <input type="text" id="keyword" name="keyword" autocomplete=&q ...

  5. 第一个demo

    1.首先这是最初的概念模型. 2.最后设计成这样. 3.运行

  6. 多线程编程4 - GCD

    一.简介 在iOS所有实现多线程的方案中,GCD应该是最有魅力的,因为GCD本身是苹果公司为多核的并行运算提出的解决方案.GCD在工作时会自动利用更多的处理器核心,以充分利用更强大的机器.GCD是Gr ...

  7. 九 EJB

    一 EJB 1. 定义:EJB 就是一组用 Java 语言编写的包含字段和方法的代码体,而这些代码的核心任务就是实现纯粹的业务逻辑. 2. EJB 和 JavaBean 的相同点: a) 都有 get ...

  8. （基础篇）PHP字符串函数

    1查找字符位置函数:   strpos($str,search,[int]):查找search在$str中的第一次位置从int开始: stripos($str,search,[int]):函数返回字符 ...

  9. [POJ] 3277 .City Horizon（离散+线段树）

    来自这两篇博客的总结 http://blog.csdn.net/SunnyYoona/article/details/43938355 http://m.blog.csdn.net/blog/mr_z ...

  10. tyvj 1057 dp 变形背包

    P1057 金明的预算方案 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第二道 描述 金明今天很开心,家里购置的新房就要领钥匙了 ...