您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery toggleClass应用实例
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了jQuery toggleClass的应用,需要的朋友可以参考下
1、首先到jQuery官网下载js库，网址为http://jquery.com/ 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>- 上一个程序编程： Javascript排序算法之计数排序的实例
- 下一个程序编程： JavaScript中的prototype和constructor简明总结
