主题: 3024-nightambiance-mobileambiancebase16-darkblackboardcobalteclipseerlang-darklesser-darkmbomdn-likemidnightmonokaineatneonightparaiso-darkpastel-on-darkrubybluesolarizedthe-matrixtomorrow-night-eightiesvibrant-ink 新窗口 视图: 左侧面板 HTML CSS JS 预览 F11(全屏显示选中的编辑器) 查看更多帮助信息

相关文章:

jQuery.toggleClass() 函数详解

代码类型:

默认(HTML/CSS/JS) HTML混合(单页) PHP Java C# C++ C SQL

杂项:

• 启用CSS/JS语法检查
• 监测脚本运行错误
• 禁止库文件重复

文档类型:

HTML5 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset 无

JS库文件:

无 jQuery 1.11.1jQuery 2.1.1jQuery 1.10.2jQuery 1.9.1jQuery 1.8.3jQuery 1.7.2jQuery 1.6.4jQuery 1.5.2jQuery 1.4.4jQuery 1.3.2jQuery 1.2.6

手动添加:

1. jQuery 1.11.1

<div id="n1"> <p id="n2" class="demo test">CodePlayer</p> <p id="n3" class="foo">专注于编程开发技术分享</p> </div>

//在当前页面内追加换行标签和指定的HTML内容 function w( html ){ $(document.body).append("<br/>" + html); } //以下注释中的"当前"均表示在该函数执行之前 var $n2 = $("#n2"); // 切换n2上的一个css类名(当前有"demo"，切换后无"demo") $n2.toggleClass("demo"); w( $n2.attr("class") ); // test //切换n2上的2个css类名(当前无"demo"有"test"，切换后则有"demo"无"test") $n2.toggleClass("demo test"); w( $n2.attr("class") ); // demo var $n3 = $("#n3"); // 为n3添加2个css类名(类名"foo"已存在，不会重复添加) // 相当于 $n3.addClass("foo bar"); $n3.toggleClass("foo bar", true); w( $n3.attr("class") ); // foo bar // 移除所有的css类名(当前的class属性值为"foo bar"，有css类名，内部会先存档再移除) $n3.toggleClass(false); w( $n3.attr("class") ); // (空字符串) // 恢复为上一次保存的class属性值(当前的class属性值为""，没有css类名，内部不会保存) // 此时switch不为false，并且元素没有css类名，因此会恢复为之前保存的class属性值("foo bar") $n3.toggleClass(true); w( $n3.attr("class") ); // foo bar // 移除n3上的一个css类名 // 相当于 $n3.removeClass("bar"); $n3.toggleClass("bar", false); w( $n3.attr("class") ); // foo // 移除所有的css类名(当前的class属性值为"foo"，有css类名，内部会先存档再移除) // 由于当前有css类名，因此无论参数是true还是false，都会移除全部的css类名 $n3.toggleClass(true); w( $n3.attr("class") ); // (空字符串) // 恢复为上次保存的class属性值(当前的class属性值为""，没有css类名，内部不会保存) //此时switch不为false，并且元素没有css类名，因此会恢复为之前保存的class属性值("foo") $n3.toggleClass(true); w( $n3.attr("class") ); // foo // 当前有css类名，移除所有的css类名(当前的class属性值为"foo"，有css类名，内部会先存档再移除) // 相当于 $n3.toggleClass(true); $n3.toggleClass(); w( $n3.attr("class") ); // (空字符串) // 当前无css类名，恢复为上次保存的class属性值(当前的class属性值为""，没有css类名，内部不会保存) //此时switch不为false，并且元素没有css类名，因此会恢复为之前保存的class属性值("foo") $n3.toggleClass(); w( $n3.attr("class") ); // foo // 切换、强制添加操作针对print-index和printed两个类名 // 移除只针对print-index (index表示当前元素在匹配元素中的索引) function callback(index, classNames, _switch){ // 函数内部的this指向迭代的当前DOM元素 if( _switch === false){ return "print-" + index; }else{ // true 或 undefined return "print-" + index + " printed"; } } // 这里的true，就是传递给函数callback的第三个参数_switch的值 $("p").toggleClass( callback, true);