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 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
js添加绑定事件的方法
May 15 Javascript
jquery实现网页定位导航
Aug 23 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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中文本操作的类
2007/03/17 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
图解javascript作用域链
2019/05/27 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
广州某公司软件工程师面试题
2014/12/22 面试题
公务员培训自我鉴定
2014/02/01 职场文书
好人好事事迹材料
2014/02/12 职场文书
个人银行贷款担保书
2014/04/01 职场文书
小学生新年寄语
2014/04/03 职场文书
留学经费担保书
2014/05/12 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android