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实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
深入解析ES6中的promise
Nov 08 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
Vue如何实现组件间通信
May 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
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php限制ip地址范围的方法
2015/03/31 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python安装Scrapy图文教程
2017/08/14 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
护士自我鉴定范文
2013/10/06 职场文书
董事长助理岗位职责
2014/02/18 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
体育馆的标语
2014/06/24 职场文书
庆六一活动总结
2014/08/29 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
个人收入证明范本
2014/09/18 职场文书
审美与表现自我评价
2015/03/09 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
学习nginx基础知识
2021/09/04 Servers
python使用shell脚本创建kafka连接器
2022/04/29 Python