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 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
Cookie 小记
2010/04/01 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
python中私有函数调用方法解密
2016/04/29 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
使用npy转image图像并保存的实例
2020/07/01 Python
python 检测图片是否有马赛克
2020/12/01 Python
应届生程序员求职信
2013/11/05 职场文书
初级会计求职信范文
2014/02/15 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
学习考察心得体会
2014/09/04 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
自荐信大全
2019/03/21 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
python爬虫之selenium库的安装及使用教程
2021/05/23 Python