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 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JS继承用法实例分析
Feb 05 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
人大复印资料处理程序_补充篇
2006/10/09 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
详解Django通用视图中的函数包装
2015/07/21 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python 负数取模运算实例
2020/06/03 Python
vscode调试django项目的方法
2020/08/06 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
C#面试问题
2016/07/29 面试题
智能电子应届生求职信
2013/11/10 职场文书
小学课外活动总结
2014/07/09 职场文书
食品药品安全责任书
2015/05/11 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
用Python爬取某乎手机APP数据
2021/06/15 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Python集合的基础操作
2021/11/01 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle