JavaScript DHTML/jQuery/toggleClass
toggleClass(class) adds the specified class if it is not present, removes the specified class if it is present.
<source lang="html4strict">
<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>
Hello
</body>
</html>
</source>
ToggleClass function
<source lang="html4strict">
<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>
A
</body>
</html>
</source>
Toggle DIV color
<source lang="html4strict">
<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>
asdf
asdf
asdf
</body>
</html>
</source>