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控件
Mar 27 Javascript
js常用代码段整理
Nov 30 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
JavaScript获取时区实现过程解析
Sep 24 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 IPV6正则表达式验证代码
2010/02/16 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
精伦电子Java笔试题
2013/01/16 面试题
大二学生职业生涯规划书
2014/02/05 职场文书
出生公证委托书
2014/04/03 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
父亲节寄语大全
2015/02/27 职场文书
圣诞晚会主持词
2015/07/01 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
外出听课学习心得体会
2016/01/15 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Java Socket实现多人聊天系统
2021/07/15 Java/Android
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL