jquery点击改变class并toggle的实现代码


Posted in Javascript onMay 15, 2016

jquery点击改变class并toggle的实现代码

<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的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 #Javascript
浅析js绑定事件的常用方法
May 15 #Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
You might like
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python调用接口的4种方式代码实例
2019/11/19 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
国培计划培训感言
2014/03/11 职场文书
年度考核自我鉴定
2014/03/19 职场文书
买房委托公证书
2014/04/08 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2014年司机工作总结
2014/11/21 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
Redis Stream类型的使用详解
2021/11/11 Redis
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记