js實現(xiàn)二級導(dǎo)航功能
更新時間：2017年03月03日 14:15:24 作者：君邪兒
本文主要介紹了js實現(xiàn)二級導(dǎo)航功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{text-decoration: none;}
*{margin: 0;padding: 0;box-sizing: border-box;font-family: "微軟雅黑";}
li{list-style-type: none;}
.box{width: 220px;height: 477px;margin-top: 110px;margin-left: 100px;}
h3{width: 100%;height: 50px;line-height: 50px;text-align: center;background: #09f;}
h3 a{color: #FFFFFF;}
h3 a:hover{color: deeppink;}
ul li{width: 100%;height: 70px;line-height: 70px;border: 1px solid red;background: #09e;}
ul li:not(:last-child){border-bottom: none;}
ul li a{display: block;color:#FFFFFF;text-align: center;font-weight: bold;font-size: 18px;}
ul li:hover{background: #00E8D7;}
ul li:hover a{color: orange;}
ul{position: relative;}
.content{
position: absolute;top:0;left: 220px;
width: 800px;height: 300px;
border: 1px solid #00FF66;
display: none;
}
</style>
</head>
<body>
<p style="margin: 20px;">
end():結(jié)束當前鏈條中最近的篩選操作，并將匹配元素還原為之前的匹配狀態(tài)。
</p>
<div class="box">
<h3><a href="" target=" rel="external nofollow" _blank">全部菜單</a></h3>
<ul>
<li>
<a href="">一級導(dǎo)航</a>
<div class="content">
11111111111111111111111111
</div>
</li>
<li>
<a href="">一級導(dǎo)航</a>
<div class="content">
22222222222222222222222222
</div>
</li>
<li>
<a href="">一級導(dǎo)航</a>
<div class="content">
33333333333333333333333333333
</div>
</li>
<li>
<a href="">一級導(dǎo)航</a>
<div class="content">
44444444444444444444
</div>
</li>
<li>
<a href="">一級導(dǎo)航</a>
<div class="content">
5555555555555555555555555555
</div>
</li>
<li>
<a href="">一級導(dǎo)航</a>
<div class="content">
6666666666666666666666666666666666
</div>
</li>
</ul>
</div>
</body>
</html>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').hover(function(){
$(this).find('.content').show().end().siblings().find('.content').hide();
},function(){
$(this).find('.content').hide();
});
})
</script>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
從csdn的blog上轉(zhuǎn)過來的 做了些修改，其實寫的比較糟糕(我指的是構(gòu)造) 我用的是以前的一個drag類 在這個基礎(chǔ)上在的來完成的Slider2010-03-03
這篇文章主要為大家詳細介紹了swiper插件自定義切換箭頭按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的代碼詳解
很多前端的同學(xué)對數(shù)據(jù)結(jié)構(gòu)和算法這塊沒有太多的概念,很多l(xiāng)eetcode的題目看不懂,有時候可能看了題解也不知道是什么意思,這篇文章咱們來簡單的談一談鏈表,文中給大家介紹了JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的示例代碼,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了HTML5 Canvas實現(xiàn)圓形時鐘簡易教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript實現(xiàn)網(wǎng)頁計算器功能
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了配置eslint規(guī)范項目代碼風(fēng)格，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Javascript圖片無縫滾動的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下2015-12-12
JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法,簡單分析了javascript觀察者模式的原理、功能并結(jié)合實例形式給出了觀察者模式的實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
javaScript 判斷字符串是否為數(shù)字的簡單方法
javascript在通過parseIn或parseFloat將字符串轉(zhuǎn)化為數(shù)字的過程中，如果字符串中包含有非數(shù)字，那么將會返回NaN，參考下面代碼2009-07-07
基于JS實現(xiàn)9種不同的面包屑和分布式多步驟導(dǎo)航效果
本文是小編給大家分享的基于js實現(xiàn)的9種不同風(fēng)格的面包屑和分布式多步驟導(dǎo)航效果，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02