用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(){//第一個函數(shù)作為鼠標懸浮時執(zhí)行的函數(shù)
$(this).addClass("bg");
},function(){//第二個函數(shù)作為鼠標離開時執(zhí)行的函數(shù)
$(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實現(xiàn)fixed布局的方法
這篇文章主要介紹了jQuery仿gmail實現(xiàn)fixed布局的方法,涉及jQuery操作頁面元素屬性的相關技巧,需要的朋友可以參考下2015-05-05
仿淘寶京東多條件篩選可自行結合ajax加載，使用Jquery簡單實現(xiàn)，具體如下，喜歡的朋友可以參考下2013-08-08
jQuery移動頁面開發(fā)中的觸摸事件與虛擬鼠標事件簡介
這篇文章主要介紹了jQuery移動頁面開發(fā)中的觸摸事件與虛擬鼠標事件的簡單編寫方法,jQuery是當今人氣最高的Javascript庫并被廣泛應用于移動web的開發(fā),需要的朋友可以參考下2015-12-12
input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點時隱藏或顯示文字，這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧，本文使用jquery實現(xiàn)以下，感興趣的朋友可以參考下哈2013-04-04
jQuery Validation實例代碼 讓驗證變得如此容易
眾所周知，Jquery以其簡潔性讓無數(shù)人為之瘋狂。現(xiàn)在我要像大家介紹一個jQuery Validation，一看到Validation大家肯定第一直觀感覺就是這肯定是一個驗證框架，沒有錯，本文就是基于jQuery Validation展開討論。2010-10-10
本文為大家介紹下html偽彈出框的實現(xiàn)，感興趣的朋友可以了解下2013-09-09
第一次認識jquery延遲對象，這篇文章主要為大家詳細解析JQ延遲對象的相關概念,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細介紹了jQuery easyui基本布局實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08