<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. 一个经典例子让你彻彻底底理解java回调机制

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢 所谓回调: ...

  2. 如何修改WAMP数据库上传文件的大小及上传时间限制

    一个文件如果几十兆的话,上传时可能出错,因为执行时间不够, 比如我遇到的ECshop的数据库文件就是 40多M 第一次执行失败. 所以索性一次性把所有东西都设置好.在php.ini(apache中的P ...

  3. CMAKE的用法

    一.      基本使用 安装:下载二进制包后可直接解压使用 从源码安装则执行命令:./bootstrap; make; make install——尝试执行bootstrap失败 使用:cmake ...

  4. LeetCode Search a 2D Matrix（二分查找）

    题意: 有一个矩阵,每行都有序,每行接在上一行尾后仍然有序.在此矩阵中查找是否存在某个数target. 思路: 这相当于用一个指针连续扫二维数组一样,一直p++就能到最后一个元素了.由于用vector ...

  5. (实用篇)php中计算中文字符串长度、截取中文字符串的函数代码

    在PHP中,我们都知道有专门的mb_substr和mb_strlen函数,可以对中文进行截取和计算长度,但是,由于这些函数并非PHP的核心函数,所以,它们常常有可能没有开启.当然,如果是用的自己的服务 ...

  6. name值与id值在Js获取元素时的区别

    1.适用范围 除base.head.html.script.meta.title标签外,id都可以用:name只适用于select.form.frame.iframe.img.a.input等中. H ...

  7. poj3249 Test for Job ——拓扑+DP

    link:http://poj.org/problem?id=3249 在拓扑排序的过程中进行状态转移,dp[i]表示从起点到 i 这个点所得到的的最大值.比如从u点到v点,dp[v]=max(dp[ ...

  8. leetcode 128. Longest Consecutive Sequence ----- java

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  9. Codeforces Round #122 (Div. 2)

    A. Exams 枚举分数为3.4.5的数量,然后计算出2的数量即可. B. Square 相当于求\(\min{x(n+1)\ \%\ 4n=0}\) 打表发现,对\(n\ \%\ 4\)分类讨论即 ...

  10. Draw a Border around any C# Winform Control

    public class MyGroupBox : GroupBox { protected override void OnPaint(PaintEventArgs e) { base.OnPain ...