一個(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將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-01Javascript計(jì)算兩個(gè)marker之間的距離(Google Map V3)
做地圖開發(fā),最常用到的就是marker一些操作和交互。簡單介紹一下,兩個(gè)marker之間的距離計(jì)算,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04