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 13 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
详解iframe与frame的区别
Jan 13 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
JavaScript伪数组用法实例分析
Dec 22 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Python如何实现单例模式
2016/06/03 面试题
自我评价的范文
2014/02/02 职场文书
公司委托书格式范文
2014/04/04 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
药房管理制度范本
2015/08/06 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书