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怎么终止程序return不行换jfslk
May 30 Javascript
javascript打印输出json实例
Nov 11 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
Dedecms常用函数解析
2008/02/01 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php session的锁和并发
2016/01/22 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python简明入门教程
2015/08/04 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
记者岗位职责
2014/01/06 职场文书
环境科学专业求职信
2014/08/04 职场文书
皇城相府导游词
2015/02/06 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
python周期任务调度工具Schedule使用详解
2021/11/23 Python