jQuery对象函数toggleClass()用于在选择的元素上切换一个或多个CSS类
▥前端
𝄐 0
jquerytoggle
jQuery对象函数toggleClass()用于在选择的元素上切换一个或多个CSS类。
当被点击时，它会将类添加到元素中（如果该类不存在）或从元素中删除该类（如果该类已存在）。通过这种方式，可以轻松地在元素上切换样式。
以下是toggleClass()函数的语法：
javascript
$(selector).toggleClass(classname,function(index, currentClass))
其中，selector是要切换类的元素，classname是要切换的类名。function(index, currentClass)是可选的回调函数，可以在每个元素上执行。
以下是一个简单的例子，当点击按钮时，它将在元素上添加/删除"highlight"这个类：
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery toggleClass() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">
<p>Click the button to toggle highlighting:</p>
<button id="myBtn">Toggle Highlight</button>
</div>
<script>
$("#myBtn").click(function(){
$("#myDiv").toggleClass("highlight");
});
</script>
</body>
</html>
在这个例子中，当用户单击按钮时，jQuery选择器选择id为"myDiv"的元素，并使用toggleClass()函数来添加或删除"highlight"类。如果"highlight"类已经存在于元素中，它将被删除，否则将被添加。因此，当用户单击按钮时，背景颜色将从黄色（高亮）变为白色（正常）。
jQuery对象函数toggleClass()用于在选择的元素上切换一个或多个CSS类。
当被点击时，它会将类添加到元素中（如果该类不存在）或从元素中删除该类（如果该类已存在）。通过这种方式，可以轻松地在元素上切换样式。
以下是toggleClass()函数的语法：
javascript
$(selector).toggleClass(classname,function(index, currentClass))
其中，selector是要切换类的元素，classname是要切换的类名。function(index, currentClass)是可选的回调函数，可以在每个元素上执行。
以下是一个简单的例子，当点击按钮时，它将在元素上添加/删除"highlight"这个类：
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery toggleClass() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">
<p>Click the button to toggle highlighting:</p>
<button id="myBtn">Toggle Highlight</button>
</div>
<script>
$("#myBtn").click(function(){
$("#myDiv").toggleClass("highlight");
});
</script>
</body>
</html>
在这个例子中，当用户单击按钮时，jQuery选择器选择id为"myDiv"的元素，并使用toggleClass()函数来添加或删除"highlight"类。如果"highlight"类已经存在于元素中，它将被删除，否则将被添加。因此，当用户单击按钮时，背景颜色将从黄色（高亮）变为白色（正常）。
本文地址：
/show-270041.html
版权声明：除非特别标注原创，其它均来自互联网，转载时请以链接形式注明文章出处。