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 鼠标点击事件及其它捕获
Jun 04 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
js 小贴士一星期合集
Apr 07 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
python批量处理txt文件的实例代码
2020/01/13 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
公务员职业生涯规划书范文  
2014/01/19 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
初中语文教学反思
2014/02/02 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers