用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操作textarea,input,select,checkbox方法
本文给大家汇总介绍了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的简单实用，都是小编项目中使用过的，这里推荐给大家。2015-09-09
jquery监控数据是否变化(修正版) 之前写的那篇中存在许多bug，今天重新整理了一下。还请各位指教2011-04-04
这篇文章主要介绍了jQuery基于扩展简单实现倒计时功能的方法,涉及jQuery扩展与回调函数的相关使用技巧,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jquery如何根据属性和index来查找属性值并操作,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了jquery实现仿JqueryUi可拖动的DIV,实例分析了jquery模拟jqueryUI实现div拖动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
此篇文章给大家分享了jQuery pjax 应用的一些简单示例，希望可以帮助到大家2018-09-09
使用jquery给input和textarea设定ie中的focus
在浏览网站的过程中，我们经常可以看见当鼠标点击后样式改变的文本框和文本域,那么这种效果是如何实现的呢?2008-05-05
这篇文章主要介绍了jQuery实现的五星点评功能,结合具体实例形式分析了jQuery事件响应及页面元素属性动态操作实现五星点评功能相关操作技巧,需要的朋友可以参考下2019-02-02
jQuery.Validate 使用笔记(jQuery Validation范例 )
学习jQuery Validation，于是手写一公共范例，并收藏以便后用,里面附有测试代码，需要的朋友一起来测试。2010-06-06
这篇文章主要介绍了JQuery分屏指示器图片轮换效果实现方法,实例分析了jQuery图片轮播操作的相关技巧,需要的朋友可以参考下2015-05-05
最新评论