jQuery toggleClass应用实例(附效果图)


Posted in Javascript onApril 06, 2014

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或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应用实例(附效果图)
Javascript 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
Javascript自定义事件详解
Jan 13 Javascript
Vue精简版风格概述
Jan 30 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 #Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 #Javascript
JavaScript中的typeof操作符用法实例
Apr 05 #Javascript
Javascript排序算法之计数排序的实例
Apr 05 #Javascript
JavaScript中的正则表达式简明总结
Apr 04 #Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 #Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
YII实现分页的方法
2014/07/09 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
js常用排序实现代码
2010/12/28 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
Move.js入门
2017/02/08 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
如何真正的了解python装饰器
2020/08/14 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
商务英语专业自荐信
2013/10/14 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android