用jquery的方法制作一个简单的导航栏


Posted in Javascript onJune 23, 2014
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>学习导航栏的制作</title> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
$(document).ready(function() { 
$(".div1").click(function() { 
$(".div2").addClass("dlHover"); 
}); 
$(".div1").hover(function(){//第一个函数作为鼠标悬浮时执行的函数 
$(this).addClass("bg"); 
},function(){//第二个函数作为鼠标离开时执行的函数 
$(this).removeClass("bg"); 
$(".div2").removeClass("dlHover"); 
}); 
}); 
</script> 
<style> 
*{margin: 0px auto;padding: 0px;text-align: center;} 
ul{list-style: none;} 
.div2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;} 
.dlHover{position:absolute;z-index: 9999;display: block;} 
.div1{border: 1px solid gray;width: 100px;background-color: #999999;} 
.bg{background-color: #1F9999;} 
</style> 
</head> 
<body> 
<div class="div1"> 
<span class="span1">导航1</span> 
<div class="div2"> 
<ul> 
<li><a href="#">导航2</a></li> 
<li><a href="#">导航3</a></li> 
</ul> 
</div> 
</div> 
<h3>学习导航栏的制作</h3> 
<p>这是一个简单的导航栏</p> 
</body> 
</html>
Javascript 相关文章推荐
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 #Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 #Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 #Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 #Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 #Javascript
Window.Open如何在同一个标签页打开
Jun 20 #Javascript
You might like
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
php post换行的方法
2020/02/03 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
$()JS小技巧
2007/07/21 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
在Python中使用元类的教程
2015/04/28 Python
python数组过滤实现方法
2015/07/27 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
通过python检测字符串的字母
2020/02/18 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
会计电算化专业毕业生推荐信
2013/12/24 职场文书
好军嫂事迹材料
2014/01/15 职场文书
一年级学生期末评语
2014/04/21 职场文书
说明书格式及范文
2014/05/07 职场文书
人与自然的观后感
2015/06/18 职场文书
辞职信怎么写?
2019/05/21 职场文书
56句经典英文座右铭
2019/08/09 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android