jQuery toggleClass应用实例(附效果图)
2014-04-06 00:00
615 查看
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或kong.yee@foxmail.com"/> <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、运行效果图
相关文章推荐
- jQuery toggleClass应用实例(附效果图)
- jQuery中toggleClass()方法用法实例
- jQuery中toggleClass()方法用法实例
- jquery之toggleClass应用
- 告别aspx,高性能快捷开发 — JQuery Smart UI 快捷开发实例应用(一)入门【后篇】
- jQuery遍历 is() 方法和 toggleClass()的使用
- JQuery属性与样式——删除样式.removeClass()和切换样式.toggleClass()
- jquery多选项卡效果实例代码(附效果图)
- jquery中的addClass(),removeClass(),toggleClass()
- jquery 添加和移除节点 jquery 的简单实例应用
- Jquery+Json+Handler文件结合应用实例
- 实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
- jQuery.ajax的简单应用实例 附实例下载
- jQuery应用实例3:全选、二级联动
- Jquery FadeIn,FadeOut,toggle,slideToggle的使用方法实例
- jQuery根据ID、CLASS、等获取对象的实例
- 39个超实用jQuery实例应用特效
- 用jQuery toggleClass 实现鼠标移上变色
- jQuery.ajax的简单应用实例 附实例下载
- jquery 添加和移除节点 jquery 的简单实例应用