toggleClass()
<!DOCTYPE html><html><head> <style> p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; } .blue { color:blue; } .highlight { background:yellow; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script></head><body> <p class="blue">Click to toggle</p> <p class="blue highlight">highlight</p> <p class="blue">on these</p> <p class="blue">paragraphs</p><script> $("p").click(function () { $(this).toggleClass("highlight"); });</script></body></html>~~~~~~~~~~~~~~~~~~~~ 简单的说明一下：
class的值不是替换：而是在后面追加赋值。
例子2、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="c:\jquery.js"></script>
</head>
<script>
$(function(){
$("input").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
alert($("input").attr("class"));
});
});
</script>
<body>
<input class="inputclass" type="button" value="测试"></input>
</body>
</html>
<html>
<head>
<title> New Document </title>
<script src="c:\jquery.js"></script>
</head>
<script>
$(function(){
$("input").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
alert($("input").attr("class"));
});
});
</script>
<body>
<input class="inputclass" type="button" value="测试"></input>
</body>
</html>
相关推荐
### jQuery.toggleClass() 函数详解 #### 一、概述 `toggleClass()` 是 jQuery 库中的一个常用函数，用于切换（添加或移除）一个或多个 CSS 类名到被选元素上。此方法允许开发者根据条件动态地改变网页的样式。 #...
jQuery的toggleClass()方法是JavaScript库中的一个核心功能，它在网页动态效果和用户交互中扮演着重要角色。这个方法允许我们方便地切换HTML元素的CSS类，即在元素上添加或移除一个或多个类，根据该类是否已经存在。...
在JavaScript的世界里，jQuery库为开发者提供了很多便捷的API，其中`toggleClass`是一个非常实用的功能。这个方法允许我们在元素上动态地添加或删除一个或多个CSS类，使得我们的页面交互更加灵活和生动。本文将深入...
本文实例讲述了jQuery中toggleClass()方法用法。分享给大家供大家参考。具体分析如下： 此方法对添加或移除匹配元素的一个或多个类进行切换。 toggleClass()方法检查匹配元素中指定的类。如果不存在则添加类，如果已...
2. toggleClass方法：在jQuery中，toggleClass方法用于切换一个或多个类的添加或移除。具体来说，如果一个元素上存在某个类，执行此方法后会移除该类，反之则会添加该类。这个方法常用于为元素添加或移除CSS类，从而...
在前端开发中，jQuery作为一个流行的JavaScript库，提供了许多简化DOM操作的方法，其中`toggleClass`是处理元素class切换的常用方法。该方法允许开发者轻松地在元素上添加或移除一个或多个CSS类名，从而达到切换状态...
toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。 然而，通过使用 “switch” 参数，您能够规定只...
`toggleClass()`方法还可以接受一个回调函数作为第二个参数，用于在切换类之前进行额外的处理，以及一个布尔值作为第三个参数来指定是否只添加或只删除类，而不是切换。 #### 具体实现 为了实现点击改变class并切换...
jQuery 提供了一种简洁的方法来实现这一效果，特别是通过使用 `toggleClass()` 函数。这个函数允许我们动态地切换元素的 CSS 类，从而改变其样式。在本例中，我们将详细探讨如何使用 jQuery 的 `toggleClass()` 实现...
表格升缩jquery 源代码 $(document).ready(function(){ $(".hdw").click(function(){ ... $(this).toggleClass("selected") .siblings('.child_'+this.id).toggle(); }).click(); });
在示例2中，同样使用`mouseover`和`mouseout`事件，但这次使用`toggleClass`，使得在鼠标悬停和离开时，`.a`类的状态在添加和删除之间切换，实现类似开关的效果。代码如下： ```javascript $("#d").mouseover...
当鼠标移上按钮时，`toggleClass`方法会添加`.btn-hover`类到当前元素，而鼠标离开按钮时，`toggleClass`方法则会移除`.btn-hover`类。这里的第二个参数`200`表示切换类时会有200毫秒的延时效果，使得变化更加平滑。...
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> [removed][removed] <style ...