用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最佳实践完整篇
Aug 20 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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调用C代码的实现方法
2014/03/11 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
实例讲解PHP表单
2020/06/10 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Python实现将xml导入至excel
2015/11/20 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python中的decimal类型转换实例详解
2019/06/26 Python
解析python的局部变量和全局变量
2019/08/15 Python
基于Python实现简单学生管理系统
2020/07/24 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
找工作求职信
2014/07/07 职场文书
远程培训的心得体会
2014/09/01 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang