用jquery的方法制作一個簡單的導(dǎo)航欄
更新時間：2014年06月23日 10:18:48 投稿：whsnow
用jquery制作一個簡單的導(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(){//第一個函數(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">導(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>這是一個簡單的導(dǎo)航欄</p>
</body>
</html>
您可能感興趣的文章:
- 簡單的jquery左側(cè)導(dǎo)航欄和頁面選中效果
- JQuery 浮動導(dǎo)航欄實現(xiàn)代碼
- Jquery給當(dāng)前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實例
- jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點擊后變換顏色的方法
- jquery實現(xiàn)鼠標點擊后展開列表內(nèi)容的導(dǎo)航欄效果
- jquery+css實現(xiàn)側(cè)邊導(dǎo)航欄效果
- jQuery Mobile 導(dǎo)航欄代碼
- jQuery點擊導(dǎo)航欄選中更換樣式的實現(xiàn)代碼
- jquery實現(xiàn)垂直和水平菜單導(dǎo)航欄
- jQuery實現(xiàn)帶展開動畫的導(dǎo)航欄效果
相關(guān)文章
下面小編就為大家?guī)硪黄钊肜斫鈐Query之防止冒泡事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
在一些圖片比較多的網(wǎng)站上會出現(xiàn)訪問時圖片不存在的情況：默認顯示出來的樣子很不雅觀,可以解決圖片不存在時，使用其他的圖片替換嗎，答案是可以的；感興趣的朋友可以了解下，或許本文可以幫助到你2013-02-02
IE還真是讓設(shè)計師恨的牙癢癢的東西，且現(xiàn)在已經(jīng)有IE6、IE7、IE8、IE9、IE10這個五種不同版本的瀏覽器，且都有一點小差異。但是沒辦法，為了讓網(wǎng)頁在每個瀏覽器中顯示都一樣還必須遷就它2014-06-06
jQuery實現(xiàn)的點擊顯示隱藏下拉菜單功能完整示例
這篇文章主要介紹了jQuery實現(xiàn)的點擊顯示隱藏下拉菜單功能,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作簡單實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
jQuery中驗證表單提交方式及序列化表單內(nèi)容的實現(xiàn)
之前項目中使用的表單提交方式，使用form()方法可以將提交事件脫離submit按鈕，綁定到任何事件中，下面有個不錯的示例大家可以參考下2014-01-01
下面小編就為大家分享一篇jquery animate動畫持續(xù)運動的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
想在頁面加載完成后，有幾個地方顯示當(dāng)前時間，所以想通過jquery給多個span賦值,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了使用jQuery在對象中緩存選擇器的簡單方法,jQuery是最知名的JavaScript庫,需要的朋友可以參考下2015-06-06
.prev()方法允許我們在 DOM 樹中搜索這些元素的前一個同胞元素，并用匹配元素構(gòu)造一個新的jQuery對象2014-07-07
這篇文章主要介紹了jQuery中unwrap()方法用法,實例分析了unwrap()方法的定義、功能及移除匹配元素父元素的使用技巧,需要的朋友可以參考下2015-01-01