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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python递归函数定义与用法示例
2017/06/02 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python生成任意频率正弦波方式
2020/02/25 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
公司奖励通知
2015/04/21 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016年元旦寄语
2015/08/17 职场文书
Pandas自定义选项option设置
2021/07/25 Python
python基础之函数的定义和调用
2021/10/24 Python