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 学习之旅 (1)
Feb 05 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python实现的读写json文件功能示例
2018/06/05 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
2014年公司迎新年活动方案
2014/02/24 职场文书
法人委托书范本格式
2014/09/15 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
关于倡议书的范文
2015/04/29 职场文书
七年级英语教学反思
2016/02/15 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python