用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乱码的一次解决过程 图解教程
Feb 20 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JS定时器实例
2013/04/17 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python 实现归并排序算法
2012/06/05 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
如何理解python对象
2020/06/21 Python
领导干部作风建设自查报告
2014/10/23 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby