jQuery toggleClass应用实例(附效果图)
1、首先到jQuery官网下载js库，网址为http://jquery.com/
2、建立一个jQuery示例的项目。
3、将js库放到jQuery示例的项目中。
4、写一个html页面
5、运行效果图
2、建立一个jQuery示例的项目。
3、将js库放到jQuery示例的项目中。
4、写一个html页面
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="author" content="Kong.Yee"/> <meta http-equiv="corporation" content="广州匡兴软件科技有限公司"/> <meta http-equiv="contact" content="791663094或[email protected]"/> <script type="text/javascript" language="JavaScript" src="js/jquery-1.10.2.js"></script> <title>Insert title here</title> <style type="text/css"> .bg{ /*背景颜色*/ background: #f00; /*字体颜色*/ color: #fff; width: 80px; } ul, li { /*清除ul和li上默认的小圆点*/ list-style: none; } ul { /*清除子菜单的缩进值*/ padding: 0;/*IE8,IE9,火狐可以；IE7，IE6，IE5.5不行*/ margin: 0;/*都可以了*/ } </style> <script type="text/javascript"> $(function(){ //setColor是鼠标移动的方法 $("li").mouseover(setColor).mouseout(setColor); function setColor(){ //如果存在（不存在）就删除（添加）一个类 $(this).toggleClass("bg"); } }); </script> </head> <body> <div id="div"> <ul> <li>横向菜单1</li> <li>横向菜单2</li> <li>横向菜单3</li> <li>横向菜单4</li> <li>横向菜单5</li> <li>横向菜单6</li> </ul> </div> </body> </html>
5、运行效果图
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17