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中解析HTML字符串示例代码
Apr 16 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Validform表单验证总结篇
Oct 31 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 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
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
EJB的基本架构
2016/09/22 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
交通违章检讨书
2014/09/21 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014年党支部工作总结
2014/11/13 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
张思德观后感
2015/06/09 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
python 模块重载的五种方法
2021/04/24 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android