用jquery的方法制作一個(gè)簡(jiǎn)單的導(dǎo)航欄
更新時(shí)間：2014年06月23日 10:18:48 投稿：whsnow
用jquery制作一個(gè)簡(jiǎn)單的導(dǎo)航欄，使用到了addClass及removeClass等方法，需要的朋友可以參考下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>學(xué)習(xí)導(dǎo)航欄的制作</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(){//第一個(gè)函數(shù)作為鼠標(biāo)懸浮時(shí)執(zhí)行的函數(shù)
$(this).addClass("bg");
},function(){//第二個(gè)函數(shù)作為鼠標(biāo)離開時(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">導(dǎo)航1</span>
<div class="div2">
<ul>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
</div>
</div>
<h3>學(xué)習(xí)導(dǎo)航欄的制作</h3>
<p>這是一個(gè)簡(jiǎn)單的導(dǎo)航欄</p>
</body>
</html>
您可能感興趣的文章:
- 簡(jiǎn)單的jquery左側(cè)導(dǎo)航欄和頁(yè)面選中效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
- jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
- jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果
- jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
- jQuery Mobile 導(dǎo)航欄代碼
- jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
- jQuery實(shí)現(xiàn)帶展開動(dòng)畫的導(dǎo)航欄效果
相關(guān)文章
實(shí)例詳解jQuery結(jié)合GridView控件的使用方法
這篇文章主要以實(shí)例的方式詳細(xì)介紹了jQuery結(jié)合GridView控件的使用方法，感興趣的小伙伴們可以參考一下2016-01-01
使用Jquery獲取帶特殊符號(hào)的ID 標(biāo)簽的方法
這篇文章主要介紹了使用Jquery如何獲取帶特殊符號(hào)的ID 標(biāo)簽，該怎么寫,需要的朋友可以參考下2014-04-04
jQuery仿gmail實(shí)現(xiàn)fixed布局的方法
這篇文章主要介紹了jQuery仿gmail實(shí)現(xiàn)fixed布局的方法,涉及jQuery操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05
Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
仿淘寶京東多條件篩選可自行結(jié)合ajax加載，使用Jquery簡(jiǎn)單實(shí)現(xiàn)，具體如下，喜歡的朋友可以參考下2013-08-08
jQuery移動(dòng)頁(yè)面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫方法,jQuery是當(dāng)今人氣最高的Javascript庫(kù)并被廣泛應(yīng)用于移動(dòng)web的開發(fā),需要的朋友可以參考下2015-12-12
input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點(diǎn)時(shí)隱藏或顯示文字，這樣的焦點(diǎn)效果想必很多朋友在填寫form表格的時(shí)候都曾見(jiàn)識(shí)過(guò)吧，本文使用jquery實(shí)現(xiàn)以下，感興趣的朋友可以參考下哈2013-04-04
jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易
眾所周知，Jquery以其簡(jiǎn)潔性讓無(wú)數(shù)人為之瘋狂?，F(xiàn)在我要像大家介紹一個(gè)jQuery Validation，一看到Validation大家肯定第一直觀感覺(jué)就是這肯定是一個(gè)驗(yàn)證框架，沒(méi)有錯(cuò)，本文就是基于jQuery Validation展開討論。2010-10-10
本文為大家介紹下html偽彈出框的實(shí)現(xiàn)，感興趣的朋友可以了解下2013-09-09
第一次認(rèn)識(shí)jquery延遲對(duì)象，這篇文章主要為大家詳細(xì)解析JQ延遲對(duì)象的相關(guān)概念,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery組件easyui基本布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08