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 学习笔记(四)
Dec 31 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
使用Python的turtle模块画图的方法
2017/11/15 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
企业承诺书怎么写
2014/05/24 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
物业工程部岗位职责
2015/02/11 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL