用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在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
全面理解闭包机制
Jul 11 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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延迟静态绑定实例分析
2015/02/08 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
javascript 数组操作详解
2015/01/29 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
使用python Django做网页
2013/11/04 Python
Python读取properties配置文件操作示例
2018/03/29 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
华为慧通笔试题
2016/04/22 面试题
AJax面试题
2014/11/25 面试题
汉语言文学专业自荐信
2014/06/11 职场文书
中国梦口号
2014/06/13 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
任命书怎么写
2015/03/02 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python