用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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
vue3.0中setup使用(两种用法)
Dec 02 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 fread()使用技巧
2010/01/22 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
Python文件处理
2016/02/29 Python
python学生信息管理系统(初级版)
2018/10/17 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
python 多进程队列数据处理详解
2019/12/23 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
求职简历自荐信范文
2013/10/21 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
志愿者工作心得体会
2016/01/15 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技