脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery点击改变class

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

 更新时间：2015年12月11日 09:07:46   作者：cag2050  
这篇文章主要介绍了jQuery点击改变class并toggle及toggleClass()方法定义用法的相关资料,需要的朋友可以参考下

我滴古老风格，废话不多说，贴代码了。

<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 数据选择插件Pickerbox使用介绍

    Jquery 数据选择插件Pickerbox使用介绍

    目前市面上很少见或几乎没有这数据(对象)选择插件.比如,点击input , select 元素时弹出div(窗口),载入数据让用户选择数据,选择后在填充回对应的元素.
    2012-08-08
  • jQuery $.get 的妙用 访问本地文本文件

    jQuery $.get 的妙用 访问本地文本文件

    当页面文件.html作为本地文件打开(即IE路径为file:///开头的)的时候，需要访问本地文本文件的内容时
    2012-07-07
  • jQuery Validate初步体验(一)

    jQuery Validate初步体验(一)

    jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的，本文给大家分享jquery validate初步体验(一)，感兴趣的朋友一起学习吧
    2015-12-12
  • jQuery getJSON()+.ashx 实现分页(改进版)

    jQuery getJSON()+.ashx 实现分页(改进版)

    参考了上一篇Asp .net ＋jquery +.ashx 文件实现分页并作了改进:ashx返回json数据，减少传输数据量，html页面样式控制也比较灵活，感兴趣的朋友可以参考下哈
    2013-03-03
  • jquery的ajax跨域请求原理和示例

    jquery的ajax跨域请求原理和示例

    这篇文章主要介绍了jquery的ajax跨域请求原理和示例,需要的朋友可以参考下
    2014-05-05
  • jquery获取当前点击的元素的五种方法介绍

    jquery获取当前点击的元素的五种方法介绍

    我们可以使用$(this)方法获取事件处理函数内部的当前元素,也可以使用e.target方法在外部获取当前元素,此外,我们还介绍了parent()方法和find()方法获取当前元素的父元素或子元素,以及closest()方法获取当前元素最近的祖先元素
    2023-08-08
  • jQuery的12招常用技巧分享

    jQuery的12招常用技巧分享

    jquery是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器。由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
    2011-08-08
  • jquery马赛克拼接翻转效果代码分享

    jquery马赛克拼接翻转效果代码分享

    这篇文章主要介绍了jquery马赛克拼接翻转效果，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • jQuery实现类似滑动门切换效果的层切换

    jQuery实现类似滑动门切换效果的层切换

    滑动门切换效果想必大家都有见到过吧，在本文为大家介绍下jQuery是如何实现层切换的
    2013-09-09
  • JQuery中clone方法复制节点

    JQuery中clone方法复制节点

    这篇文章主要介绍了JQuery中clone方法复制节点,实例分析了clone方法浅克隆与深克隆的使用方法,需要的朋友可以参考下
    2015-05-05

最新评论