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实现点击链接取消跳转效果的方法
Jan 24 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Django 路由系统URLconf的使用
2018/10/11 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python使用re模块验证危险字符
2020/05/21 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
公务员转正考察材料
2014/02/07 职场文书
护理学专业求职信
2014/06/29 职场文书
中队活动总结
2014/08/27 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android