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 onload事件不起作用示例分析
Oct 09 Javascript
js读取cookie方法总结
Oct 31 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python程序暂停的正常处理方法
2019/11/07 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python实现简单井字棋游戏
2020/03/04 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
会计专业推荐信
2013/10/29 职场文书
安全生产月标语
2014/10/07 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
行为习惯主题班会
2015/08/14 职场文书