JavaScript Tutorial/jQuery/toggleClass
30. toggleClass(class) adds the specified class if it is not present, removes the specified class if it is present.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").toggleClass("highlight");
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
30. ToggleClass function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).toggleClass("blue");
});
});
</script>
</head>
<style>
.blue { color:blue; }
</style>
<body>
<body>
<p class=blue>A</p>
</body>
</html>
30. Toggle DIV color
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#run").click(function(){
$("div").toggleClass("colored");
});
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
div.colored { background:green; }
</style>
</head>
<body>
<button id="run">Run</button>
<div>asdf</div>
<div id="mover">asdf</div>
<div>asdf</div>
</body>
</html>