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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
九种原生js动画效果
Nov 11 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
浅析vue深复制
Jan 29 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
JS实现简易日历效果
2021/01/25 Javascript
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python图片的横坐标汉字实例
2019/12/04 Python
用python实现学生管理系统
2020/07/24 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
高中校园广播稿
2014/01/11 职场文书
迎国庆演讲稿
2014/09/15 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
基于redis+lua进行限流的方法
2022/07/23 Redis