javascript鼠標(biāo)滑過顯示二級(jí)菜單特效
本文實(shí)例為大家分享了javascript鼠標(biāo)滑過顯示二級(jí)菜單效果,供大家參考,具體內(nèi)容如下
1. 關(guān)鍵代碼:使用 switch 或 if 判斷語(yǔ)句,改變對(duì)應(yīng)的二級(jí)菜單顯示方式為 block 或 none
function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="none"; break; ... } }
2. 主導(dǎo)航 綁定事件
<ul class="nav">
<li><a href="#" onmouseover="selectTabMenu(71)">首頁(yè)</a></li>
3. 二級(jí)菜單
<ul id="TabMenuCon71" class="TabMenuCon"> <li><a href="#">公告</a></li> <li><<a href="#">信息</a></li> </ul>
4. 完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平導(dǎo)航-二級(jí)菜單</title> <style type="text/css"> *{ padding:0px; margin: 0px; } .navBar{ height: 30px; background-color: #2B383E; text-align: center; } ul{ list-style: none; } .nav li{ float: left; } .nav li a{ display: block; padding: 0 20px; height: 30px; line-height: 30px; text-decoration: none; color: #fff; } .nav li a:hover{ background-color: #fff; color: #4DB6E7 } .TabMenuCon{ clear: both; display: none; } .TabMenuCon li{ display: inline-block; } </style> <script type="text/javascript"> function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="none"; break; case 72: document.getElementById("TabMenuCon71").style.display="none"; document.getElementById("TabMenuCon72").style.display="block"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="none"; break; case 73: document.getElementById("TabMenuCon71").style.display="none"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="block"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="none"; break; case 74: document.getElementById("TabMenuCon71").style.display="none"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="block"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="none"; break; case 75: document.getElementById("TabMenuCon71").style.display="none"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="block"; document.getElementById("TabMenuCon76").style.display="none"; break; case 76: document.getElementById("TabMenuCon71").style.display="none"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="block"; break; } } </script> </head> <body> <div class="navBar"> <ul class="nav"> <li><a href="#" onmouseover="selectTabMenu(71)">首頁(yè)</a></li> <li><a href="#" onmouseover="selectTabMenu(72)">關(guān)于協(xié)會(huì)</a></li> <li><a href="#" onmouseover="selectTabMenu(73)">協(xié)會(huì)動(dòng)態(tài)</a></li> <li><a href="#" onmouseover="selectTabMenu(74)">協(xié)會(huì)活動(dòng)</a></li> <li><a href="#" onmouseover="selectTabMenu(75)">會(huì)員</a></li> <li><a href="#" onmouseover="selectTabMenu(76)">資源空間</a></li> </ul> </div> <div id="TabMenuCon"> <ul id="TabMenuCon71" class="TabMenuCon"> <li><a href="#">公告</a></li> <li><<a href="#">信息</a></li> </ul> <ul id="TabMenuCon72" class="TabMenuCon"> <li>協(xié)會(huì)簡(jiǎn)介</li> <li>組織機(jī)構(gòu)</li> <li>協(xié)會(huì)章程</li> </ul> <ul id="TabMenuCon73" class="TabMenuCon"> <li>協(xié)會(huì)新聞</li> <li>活動(dòng)預(yù)告</li> <li>求職招聘</li> </ul> <ul id="TabMenuCon74" class="TabMenuCon"> <li>義務(wù)維修月</li> <li>平面設(shè)計(jì)活動(dòng)</li> <li>程序設(shè)計(jì)活動(dòng)</li> <li>戶外拓展</li> </ul> <ul id="TabMenuCon75" class="TabMenuCon"> <li>會(huì)員登錄</li> <li>會(huì)員注冊(cè)</li> <li>繳納會(huì)費(fèi)</li> <li>會(huì)員信息管理</li> <li>修改密碼</li> </ul> <ul id="TabMenuCon76" class="TabMenuCon"> <li>PS教程</li> <li>前端設(shè)計(jì)</li> <li>Flash教程</li> </ul> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁(yè))
今天小編就為大家分享一篇Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁(yè)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10js 判斷當(dāng)前時(shí)間是否處于某個(gè)一個(gè)時(shí)間段內(nèi)
這篇文章主要介紹了js 判斷當(dāng)前時(shí)間是否處于某個(gè)一個(gè)時(shí)間段內(nèi),使用 jutils - JavaScript常用函數(shù)庫(kù)的 isDuringDate 函數(shù)來實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JavaScript 日期時(shí)間選擇器一些小結(jié)
flatpickr 是一個(gè)輕量級(jí)、注重精益、由 UX 驅(qū)動(dòng)和可擴(kuò)展的 JavaScript 日期時(shí)間選擇器。這篇文章主要介紹了JavaScript 日期時(shí)間選擇器,需要的朋友可以參考下2018-04-04詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的,那么二者有哪些區(qū)別呢,本文就來和大家進(jìn)行簡(jiǎn)單的討論,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2023-05-05Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動(dòng)效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下2015-08-08Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11