toggleClass()

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>

你可能感兴趣的:(Class)