一個(gè)級(jí)聯(lián)菜單代碼學(xué)習(xí)及removeClass與addClass的應(yīng)用
更新時(shí)間：2013年01月24日 14:08:47 作者：
最近在學(xué)些web前段的知識(shí)，看見博客園首頁左側(cè)的一個(gè)級(jí)聯(lián)菜單,很是好奇，于是想自己實(shí)現(xiàn)以下，代碼書寫很簡潔而且易懂，感興趣的朋友可以了解下，希望本文對(duì)你學(xué)習(xí)級(jí)聯(lián)菜單有所幫助
最近在學(xué)些web前段的知識(shí)，看見博客園首頁左側(cè)的一個(gè)級(jí)聯(lián)菜單，就想寫一個(gè)demo.呵呵
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
.dis_none
{
display: none;
}
.dis_block
{
display: block;
}
.subSheet
{
position: absolute;
left: 100px;
z-index: 10;
width: 100px;
}
ul
{
list-style: none;
}
li
{
border: 1px solid blue;
width: 100px;
background-color: Gray;
}
li a
{
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li onmousemove="mouse_over(1010)" onmouseout="mouse_out(1010)"><a href="">.NET精華區(qū)</a>
<div class="subSheet dis_none" id="1010">
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">托管代碼</a></li>
<li><a href="">非托管代碼</a></li>
</ul>
</div>
</li>
<li onmousemove="mouse_over(1011)" onmouseout="mouse_out(1011)"><a href="">嵌入式</a>
<div class="subSheet dis_none" id="1011">
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">嵌入式入門</a></li>
<li><a href="">嵌入式進(jìn)階</a></li>
</ul>
</div>
</li>
<li onmousemove="mouse_over(1012)" onmouseout="mouse_out(1012)"><a href="">單片機(jī)</a>
<div class="subSheet dis_none" id="1012">
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">單片機(jī)入門</a></li>
<li><a href="">單片機(jī)進(jìn)階</a></li>
</ul>
</div>
</li>
<li><a href="">軟件測試</a></li>
</ul>
</div>
</form>
</body>
</html>
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
function mouse_over(i) {
$("#" + i).removeClass("dis_none");
}
function mouse_out(i) {
$("#" + i).addClass("dis_none");
}
</script>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
.dis_none
{
display: none;
}
.dis_block
{
display: block;
}
.subSheet
{
position: absolute;
left: 100px;
z-index: 10;
width: 100px;
}
ul
{
list-style: none;
}
li
{
border: 1px solid blue;
width: 100px;
background-color: Gray;
}
li a
{
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li onmousemove="mouse_over(1010)" onmouseout="mouse_out(1010)"><a href="">.NET精華區(qū)</a>
<div class="subSheet dis_none" id="1010">
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">托管代碼</a></li>
<li><a href="">非托管代碼</a></li>
</ul>
</div>
</li>
<li onmousemove="mouse_over(1011)" onmouseout="mouse_out(1011)"><a href="">嵌入式</a>
<div class="subSheet dis_none" id="1011">
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">嵌入式入門</a></li>
<li><a href="">嵌入式進(jìn)階</a></li>
</ul>
</div>
</li>
<li onmousemove="mouse_over(1012)" onmouseout="mouse_out(1012)"><a href="">單片機(jī)</a>
<div class="subSheet dis_none" id="1012">
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">單片機(jī)入門</a></li>
<li><a href="">單片機(jī)進(jìn)階</a></li>
</ul>
</div>
</li>
<li><a href="">軟件測試</a></li>
</ul>
</div>
</form>
</body>
</html>
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
function mouse_over(i) {
$("#" + i).removeClass("dis_none");
}
function mouse_out(i) {
$("#" + i).addClass("dis_none");
}
</script>
相關(guān)文章
js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法實(shí)例匯總
這篇文章主要介紹了js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法,以實(shí)例形式匯總并分析了幾種常用的JavaScript動(dòng)態(tài)加載腳本的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-11-11
深入學(xué)習(xí)JavaScript執(zhí)行上下文
這篇文章主要介紹了深入學(xué)習(xí)JavaScript執(zhí)行上下文,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-08-08
實(shí)現(xiàn)頁面最大化 默認(rèn)img圖片 屏蔽鼠標(biāo)右鍵 取消選取防止復(fù)制等實(shí)現(xiàn)代碼。2009-10-10
將html頁面保存成圖片,圖片寫入pdf的實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄獙tml頁面保存成圖片,圖片寫入pdf的實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
小心！AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑
小心！AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑，大家在做文件合并壓縮的時(shí)候一定要注意，感興趣的朋友可以參考一下2016-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)打地鼠小游戲的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
用戶輸入密碼的強(qiáng)度...2006-07-07
Javascript計(jì)算兩個(gè)marker之間的距離(Google Map V3)
做地圖開發(fā)，最常用到的就是marker一些操作和交互。簡單介紹一下，兩個(gè)marker之間的距離計(jì)算，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04![打豆豆小游戲 用javascript編寫的[打豆豆]小游戲](http://img.jbzj.com/images/xgimg/bcimg8.png)
用javascript 寫了一個(gè)打豆豆的游戲，至于怎么玩的就不細(xì)說了，到網(wǎng)上搜一下就知道了，很簡單,感興趣的朋友可以了解下哦2013-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升機(jī)制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12