你的位置:首页 > Java教程

[Java教程]jQuery的toggleClass()函数代码实例


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="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/