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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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防注入安全代码
2008/04/09 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python监测当前联网状态并连接的实例
2018/12/18 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python模块相关知识点小结
2020/03/09 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
面向对象编程的优势是什么
2015/12/17 面试题
单位刻章介绍信范文
2014/01/11 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
公司保洁员管理制度
2015/08/04 职场文书
推广普通话主题班会
2015/08/17 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis