toggleClass()-优快云博客

本文通过两个实例展示了如何使用 jQuery 的 toggleClass() 方法来切换 HTML 元素的 CSS 类，从而实现动态改变元素样式的功能。第一个实例为点击段落元素时切换高亮显示；第二个实例则展示了鼠标悬停时输入框类名的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>