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 Tools tooltip使用说明
Jul 14 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
vue实现购物车功能(商品分类)
Apr 20 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
第三节 定义一个类 [3]
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
jQuery 位置插件
2008/12/25 Javascript
javascript 写类方式之三
2009/07/05 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
Redis全局ID生成器的实现
2022/06/05 Redis