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>