jQuery之toggleClass解析

最新推荐文章于 2022-09-18 19:42:12 发布

原创最新推荐文章于 2022-09-18 19:42:12 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了 jQuery 中的 toggleClass 方法及其使用方式。通过三个不同的示例演示了如何根据元素是否已存在某个类来添加或删除该类。此外，还展示了如何通过传入第二个参数来直接添加或移除类。

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

toggleClass(classname[,boolean]),其中第二个参数是可选的。当只传递一个参数时，toggleClass的原理如下：首先判断选择器是否有classname，如果有则动用removeClass(classname)；否则动用addClass。当传递第二个参数（true）时，相当于调用addClass(classname)；第二个参数传递(false)时，相当于调用removeClass(classname)。


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 demo1
  $("button").click(function(){
    $("p").toggleClass("main");
    alert($("p").hasClass("main"));
  });

  demo2
  $("button").click(function(){
    var $p = $("p");
    var is_main_class = $p.hasClass("main");
    if(is_main_class == true){
       $p.removeClass("main");
    }else{
       $p.addClass("main");
   }
  });

  demo3
  $("button").click(function(){
    $("p").toggleClass("main");
  });


});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p class="main">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>