jQuery toggleClass应用实例(附效果图)

2014-04-06 9

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选择器使用方法总结
Apr 09 8
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 10
JS动画效果打开、关闭层的实现方法
May 09 9
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 9
js 动态生成html 触发事件传参字符转义的实例
Feb 14 5
深入理解 Koa 框架中间件原理
Oct 18 5
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 5
手机访问当前页面