jQuerytoggleClass应用实例(附效果图)
2023-06-13 09:15:24 时间
1、首先到jQuery官网下载js库,网址为http://jquery.com/
2、建立一个jQuery示例的项目。
3、将js库放到jQuery示例的项目中。
4、写一个html页面
复制代码代码如下:
2、建立一个jQuery示例的项目。
3、将js库放到jQuery示例的项目中。
4、写一个html页面
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<metahttp-equiv="author"content="Kong.Yee"/>
<metahttp-equiv="corporation"content="广州匡兴软件科技有限公司"/>
<metahttp-equiv="contact"content="791663094或kong.yee@foxmail.com"/>
<scripttype="text/javascript"language="JavaScript"src="js/jquery-1.10.2.js"></script>
<title>Inserttitlehere</title>
<styletype="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>
<scripttype="text/javascript">
$(function(){
//setColor是鼠标移动的方法
$("li").mouseover(setColor).mouseout(setColor);
functionsetColor(){
//如果存在(不存在)就删除(添加)一个类
$(this).toggleClass("bg");
}
});
</script>
</head>
<body>
<divid="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、运行效果图
相关文章
- Oracle创建本地数据库实例及配置
- tauri聊天应用篇|vue3+tauri桌面聊天实例
- PaddleNLP通用信息抽取技术UIE【一】产业应用实例:信息抽取{实体关系抽取、中文分词、精准实体标。情感分析等}、文本纠错、问答系统、闲聊机器人、定制训练
- 沿的实例化开发与应用
- 利用Redis的有序集合实现排行榜功能实例代码
- MySQL中on duplicate key update的使用方法实例
- MySQL 应用实例:从实践中学习(mysql应用实例)
- 应用Redis:实现数据库高效管理(redis实例)
- Linux下应用开发实例研究(linux应用开发实例)
- 实例展示:MySQL事务的应用与操作技巧(mysql事务例子)
- 一台服务器,多个实例!深入了解Oracle多个SID的应用和管理方法(oracle多个sid)
- 快速掌握如何获取Redis实例(获取redis实例)
- Oracle例程引领实际应用(oracle例程与实例)
- 在Oracle中查看实例信息的方法(oracle中查看实例)
- 解析Oracle 数据库的优势(oracle 一个实例)
- AJAX简单应用实例-弹出层
- phpsession应用实例登录验证
- jquery中dom操作和事件的实例学习下拉框应用
- javascript针对DOM的应用实例(一)
- 原生javascript兼容性测试实例
- 三种动态加载js的jquery实例代码另附去除js方法
- Perl遍历目录和使用Linux命令分析日志的代码实例分享
- C++模板特例化应用实例