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显示随机图像或引用
Apr 21 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
微信小程序实现多图上传
Jun 19 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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面向对象程序设计之接口用法
2014/08/20 PHP
php curl 上传文件代码实例
2015/04/27 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
php实现微信企业转账功能
2018/10/02 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
在python中做正态性检验示例
2019/12/09 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python实现最短路径的实例方法
2020/07/19 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
How TDD works
2012/09/30 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
测控技术自荐信
2014/06/05 职场文书
临时租车协议范本
2014/09/23 职场文书
英文辞职信范文
2015/05/13 职场文书