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 相关文章推荐
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
js字符串类型String常用操作实例总结
Jul 05 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常用的文件操作函数经典收藏
2013/04/02 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
页面使用密码保护代码
2013/04/10 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
同事吵架检讨书
2014/02/05 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL