jQuery toggleClass() jQuerytoggleClass()|jQuery

本文概述

jQuery toggleClass()方法的参数
jQuery toggleClass()方法的示例
jQuery toggleClass()示例2
jQuery toggleClass()示例3

jQuery toggleCLass()方法用于从所选元素中添加或删除一个或多个类。此方法在添加和删除一个或多个类名之间切换。它检查每个元素是否有指定的类名。如果已经设置了类名, 则将其删除；如果缺少类名, 则将其添加。
这样, 它会产生切换效果。它还可以帮助你通过使用switch参数指定仅添加或仅删除。
句法：

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

jQuery toggleClass()方法的参数

参数	描述
classname	它是必填参数。它指定一个或多个要添加或删除的类名。如果你使用多个类, 请按空格将其分开。
function (index, currentclass)	它是一个可选参数。它指定你要添加或删除的一个或多个类名。索引：提供元素在集合中的索引位置。 Currentclass：提供所选元素的当前类名称。
switch	它也是一个可选参数。它是一个布尔值, 它指定是添加（true）还是删除（false）类。

jQuery toggleClass()方法的示例让我们以一个示例来演示jQuery toggleClass()方法的效果。

< !DOCTYPE html> < html> < head> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ $("p").toggleClass("main"); }); }); < /script> < style> .main { font-size: 150%; color: red; } < /style> < /head> < body> < button> Toggle class "main" for p elements< /button> < p> Hello! srcmini.com< /p> < p> This is popular tutorial website.< /p> < p> < b> Note:< /b> Click repeatedly on the button to see the toggle effect.< /p> < /body> < /html>

立即测试
jQuery toggleClass()示例2

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> toggleClass demo< /title> < style> p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: black; } .highlight { background: pink; } < /style> < script src="http://img.readke.com/220429/2304414T2-1.jpg"> < /script> < /head> < body> < p class="blue highlight"> www.srcmini.com< /p> < p class="blue"> Java Tutorial< /p> < p class="blue"> SQL Tutorial< /p> < p class="blue"> Android Tutorial< /p> < p class="blue"> HTML Tutorial< /p> < p class="blue"> etc.< /p> < script> $( "p" ).click(function() { $( this ).toggleClass( "highlight" ); }); < /script> < /body> < /html>

立即测试
jQuery toggleClass()示例3

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> toggleClass demo< /title> < style> .wrap > div { float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; } div.a { background-color: aqua; } div.b { background-color: burlywood; } div.c { background-color: cornsilk; } < /style> < script src="http://img.readke.com/220429/2304414T2-1.jpg"> < /script> < /head> < body> < div class="buttons"> < button> toggle< /button> < button class="a"> toggle a< /button> < button class="a b"> toggle a b< /button> < button class="a b c"> toggle a b c< /button> < a href="http://www.srcmini.com/#"> Reset< /a> < /div> < div class="wrap"> < div> < /div> < div class="b"> < /div> < div class="a b"> < /div> < div class="a c"> < /div> < /div> < script> var cls = [ "", "a", "a b", "a b c" ]; var divs = $( "div.wrap" ).children(); var appendClass = function() { divs.append(function() { return "< div> " + ( this.className || "none" ) + "< /div> "; }); }; appendClass(); $( "button" ).on( "click", function() { var tc = this.className || undefined; divs.toggleClass( tc ); appendClass(); }); $( "a" ).on( "click", function( event ) { event.preventDefault(); divs.empty().each(function( i ) { this.className = cls[ i ]; }); appendClass(); }); < /script> < /body> < /html>

【jQuery toggleClass()】立即测试