jQuery点击改变class并toggle及toggleClass()方法定义用法


Posted in Javascript onDecember 11, 2015

我滴古老风格,废话不多说,贴代码了。

<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 toggleClass() 方法

实例

对添加和移除所有 <p> 元素的 "main" 类进行切换:

$("button").click(function(){
$("p").toggleClass("main");
});

定义和用法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

然而,通过使用 "switch" 参数,您能够规定只删除或只添加类。

语法

$(selector).toggleClass(classname,function(index,currentclass),switch)
Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 #Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 #Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 #Javascript
详解AngularJS中module模块的导入导出
Dec 10 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python批量提取word内信息
2015/08/09 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python实现调度算法代码详解
2017/12/01 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
复古服装:RetroStage
2019/05/10 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2015年母亲节寄语
2015/03/23 职场文书