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读取RSS数据
Jan 20 Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
详解vuex的简单使用
Mar 12 Javascript
js常用正则表达式集锦
May 17 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
超级简单的发送邮件程序
2006/10/09 PHP
详解php中反射的应用
2016/03/15 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
详细分析vue表单数据的绑定
2020/07/20 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python下载网络小说实例代码
2018/02/03 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python3 拼接字符串的7种方法
2018/09/12 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python代码需要缩进吗
2020/07/01 Python
Python 创建TCP服务器的方法
2020/07/28 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
大门门卫岗位职责
2013/11/30 职场文书
团代会邀请函
2015/02/02 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书