jQuery toggleClass()方法代码实例
分类:实例代码
本章节通过代码实例演示一下toggleClass()方法的用法。
此方法可以判断一个元素是否具有指定的样式类,如果有则删除,如果没有则添加。
这种功能在一些切换效果中非常有用,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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; } ul{ padding:0; margin:0; } </style> <script type="text/javascript" src="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),注册事件处理函数,当然这里使用的是链式调用。
jQuery toggleClass()方法代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery toggleClass()方法代码实例就介绍到这了。
jQuery toggleClass()方法代码实例属于前端实例代码,有关更多实例代码大家可以查看。