I want to change the color on every click on the div, by changing the class and checking if hasClass. First removeClass, then addClass. But this won't work?
Live demo: http://www.edwinistrator.com/stuff/jquery/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Test</title> <style type="text/css"> div { cursor: pointer; float: left; border: solid 1px #ccc; padding: 5px; } .red {color: red;} .blue {color: blue;} .green {color: green;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/ libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#content").removeClass("test"); $("#content").addClass("red"); $("#content").click(function(){ //alert("boe"); if($("#content").hasClass("blue")) $("#content").removeClass("blue"); $("#content").addClass("red"); if($("#content").hasClass("red")) $("#content").removeClass("red"); $("#content").addClass("blue"); if($("#content").hasClass("green")) $("#content").removeClass("green"); $("#content").addClass("red"); }); }); </script> </head> <body> <div id="content" class="test"> I'm crazy. </div> </body> </html>
