toggleClass()-CSDN博客

本文链接：https://blog.csdn.net/JACKASDFGHJKL/article/details/84449473

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>