1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $("button").click(function(){ 7 $("p").toggleClass("main"); 8 }); 9 }); 10 </script> 11 <style type="text/css"> 12 .main 13 { 14 font-size:120%; 15 color:red; 16 } 17 </style> 18 </head> 19 20 <body> 21 <h1 id="h1">This is a heading</h1> 22 <p>This is a paragraph.</p> 23 <p>This is another paragraph.</p> 24 <button class="btn1">切换段落的 "main" 类</button> 25 </body> 26 </html>
定义和用法(简单eg看上面)
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
第二种:
$(selector).toggleClass(function(index,class),switch)