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乱码的一次解决过程 图解教程
Feb 20 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
JavaScript中的类型检查
Feb 03 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
js中less常用的方法小结
2017/08/09 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Vue实现简单计算器
2021/01/20 Vue.js
python打开网页和暂停实例
2014/09/30 Python
python实现网站的模拟登录
2016/01/04 Python
对Python3中的input函数详解
2018/04/22 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Django单元测试工具test client使用详解
2019/08/02 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
岗位竞聘演讲稿范文
2014/04/24 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
高中美术教学反思
2016/02/17 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python