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 01 Javascript
js输出列表实现代码
Sep 12 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
window.open()实现post传递参数
Mar 12 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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
php中的curl_multi系列函数使用例子
2014/07/29 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
Javascript函数的参数
2015/07/16 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python 支付整合开发包的实现
2019/01/23 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
django在开发中取消外键约束的实现
2020/05/20 Python
如何用Python徒手写线性回归
2021/01/25 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
营销与策划个人求职信
2013/09/22 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
绩效工资分配方案
2014/01/18 职场文书
工作违纪检讨书
2014/02/17 职场文书
2014国培学习感言
2014/03/05 职场文书
一分钟演讲稿
2014/04/30 职场文书
运动会闭幕词
2015/01/28 职场文书
单位委托函范文
2015/01/29 职场文书