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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
Add Formatted Text to a Word Document
Jun 15 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
js初始化验证实例详解
Nov 26 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
基于vue hash模式微信分享#号的解决
Sep 07 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详解ASCII码对照表与字符转换
2011/12/05 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python中存取文件的4种不同操作
2018/07/02 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
python实现动态创建类的方法分析
2019/06/25 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Pytorch中.new()的作用详解
2020/02/18 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
传播学毕业生求职信
2013/10/11 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
《花木兰》教学反思
2014/04/09 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
千与千寻观后感
2015/06/04 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python实现抖音热搜定时爬取功能
2022/03/16 Python