编程 Javascript

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)

jQuery点击改变class并toggle及toggleClass()方法定义用法

- Author -

cag2050

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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