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 相关文章推荐
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
理解javascript封装
Feb 23 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
redux.js详解及基本使用
May 24 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php 上传功能实例代码
2010/04/13 PHP
PHP 验证码的实现代码
2011/07/17 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
python递归实现快速排序
2018/08/18 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python三引号如何输入
2020/07/06 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
公司开业庆典主持词
2014/03/21 职场文书
道歉信范文
2015/05/12 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技