jQuery toggleClass() 及其示例


jQuery 中的 toggleClass() 方法用于在选定元素上添加或移除一个或多个类。

语法

语法如下 −

$(selector).toggleClass(classname,func(index,currentclass),switch)

上面,class name 指定要添加或移除的一个或多个类名,而 func 是一个返回要添加或移除的一个或多个类名的函数。

示例

现在让我们看一个示例来实现 jQuery toggleClass() 方法 

 实际演示

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("button").click(function(){
         $("p").toggleClass("demo");
      });
   });
</script>
<style>
.demo {
   background-color: orange;
   color: white;
   border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Exam Info</h2>
<p>Examination begins on 24th December. The students are requested to submit project report before 15th December.</p>
<button>Toggle</button>
</body>
</html>

输出

将产生以下输出 −

点击切换后,上面文本的外观将发生变化 −

再次点击切换后,外观会回到初始阶段 −

更新于: 31-12-2019

236 次浏览

开启您的 职业生涯

通过完成该课程获得认证

开始
广告