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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
JS实现拖动示例代码
Nov 01 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
原生JS实现层叠轮播图
May 17 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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 多进程 解决难题
2009/06/22 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
json 实例详细说明教程
2009/10/31 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python break语句详解
2014/03/11 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python中常见的异常总结
2018/02/20 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
企业安全生产责任书
2014/04/14 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
仰望星空观后感
2015/06/10 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang