jQuery的toggleClass()函数代码实例:
本章节通过代码实例演示一下toggleClass()函数的用法，此函数可以判断一个元素是否具有指定的样式类，如果有这删除，如果没有则添加，这种功能在一些切换效果中非常有用，代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.bg{ background:#f00; color:#fff; width:300px; } ul, li{ list-style:none; font-size:12px; height:20px; line-height:20px;} [/size][size=2]ul{ padding:0; margin:0;} </style><script type="text/javascript" src='/images/loading.gif' data-original="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(function(){ $("li").mouseover(setColor).mouseout(setColor); function setColor(){ $(this).toggleClass("bg"); } }); </script></head><body><div id="div"> <ul> <li>蚂蚁部落欢迎您</li> <li>只有努力奋斗才会有美好的明天</li> <li>每一天都是新的要好好珍惜</li> <li>明天都是虚幻的，只有当下是实实在在的</li> <li>分享互助是进步的最大源动力</li> </ul></div></body></html>
以上代码可以实现鼠标悬浮和离开时，li元素的背景色切换效果。
$("li").mouseover(setColor).mouseout(setColor)，注册事件处理函数，当然这里使用的是链式调用。
相关阅读:
1.mouseover事件可以参阅jQuery的mouseover事件一章节。
2.mouseout事件可以参阅jQuery的mouseout事件一章节。
3.toggleClass()可以参阅jQuery的toggleClass()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13108
更多内容可以参阅:http://www.softwhy.com/jquery/
原标题：jQuery的toggleClass()函数代码实例
关键词：jquery
我知道了 