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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
多个vue子路由文件自动化合并的方法
Sep 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP反射实际应用示例
2019/04/03 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python实现代码行数统计示例分享
2014/02/10 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
打包发布Python模块的方法详解
2016/09/18 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
遇到的Mysql的面试题
2014/06/29 面试题
小学生安全保证书
2014/02/01 职场文书
科级干部考察材料
2014/02/15 职场文书
请假条标准格式规范
2014/04/10 职场文书
目标管理责任书
2014/04/15 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
消防宣传标语大全
2015/08/03 职场文书