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 组件之旅(二)编码实现和算法
Oct 28 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
js转换对象为xml
Feb 17 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JavaScript门道之标准库
May 26 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
浅谈vue权限管理实现及流程
Apr 23 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来检测proxy
2006/10/09 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
python类共享变量操作
2020/09/03 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
国旗下的讲话演讲稿
2014/05/08 职场文书
文明市民先进事迹
2014/05/15 职场文书
甜品店创业计划书
2014/08/14 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
女儿满月酒致辞
2015/07/29 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
JS数组去重详情
2021/11/07 Javascript
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript