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怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
js表单验证实例讲解
Mar 31 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
js倒计时显示实例
Dec 11 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
js实现日历
Nov 07 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP积分兑换接口实例
2015/02/09 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解vue组件基础
2018/05/04 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python求凸包及多边形面积教程
2020/04/12 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python开根号实例讲解
2020/08/30 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
实习生岗位职责
2014/04/12 职场文书
安全责任书怎么写
2014/07/28 职场文书
寒假安全保证书
2015/02/28 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript