用jquery的方法制作一个简单的导航栏
更新时间：2014年06月23日 10:18:48 投稿：whsnow
用jquery制作一个简单的导航栏，使用到了addClass及removeClass等方法，需要的朋友可以参考下
<!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>
相关文章
这篇文章主要以实例的方式详细介绍了jQuery结合GridView控件的使用方法，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了使用Jquery如何获取带特殊符号的ID 标签，该怎么写,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery仿gmail实现fixed布局的方法,涉及jQuery操作页面元素属性的相关技巧,需要的朋友可以参考下2015-05-05
仿淘宝京东多条件筛选可自行结合ajax加载，使用Jquery简单实现，具体如下，喜欢的朋友可以参考下2013-08-08
这篇文章主要介绍了jQuery移动页面开发中的触摸事件与虚拟鼠标事件的简单编写方法,jQuery是当今人气最高的Javascript库并被广泛应用于移动web的开发,需要的朋友可以参考下2015-12-12
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input输入框在获得或失去焦点时隐藏或显示文字，这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧，本文使用jquery实现以下，感兴趣的朋友可以参考下哈2013-04-04
jQuery Validation实例代码 让验证变得如此容易
众所周知，Jquery以其简洁性让无数人为之疯狂。现在我要像大家介绍一个jQuery Validation，一看到Validation大家肯定第一直观感觉就是这肯定是一个验证框架，没有错，本文就是基于jQuery Validation展开讨论。2010-10-10
本文为大家介绍下html伪弹出框的实现，感兴趣的朋友可以了解下2013-09-09
第一次认识jquery延迟对象，这篇文章主要为大家详细解析JQ延迟对象的相关概念,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了jQuery easyui基本布局实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论