javascript 树形导航菜单实例代码

复制代码代码如下:
<！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>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>树形导航菜单</title>
<style type="text/css">
<！--
.parent{ width:200px; height:30px; font-size:14px; line-height:30px;}
.child{ width:200px; height:auto; font-size:12px; line-height:20px;}
-->
</style>
<script language="JavaScript1.2">
scores = new Array（20）;var numTotal=0;NS4 = （document.layers）？ 1 : 0;IE4 = （document.all）？ 1 : 0;ver4 = （NS4 || IE4）？ 1 : 0;if （ver4） {
with （document） {
write（"<STYLE TYPE="text/css">"）;
if （NS4） {
write（".parent {position:absolute; visibility:visible}"）;
write（".child {position:absolute; visibility:visible}"）;
write（".regular {position:absolute; visibility:visible}"）
}
else {
write（".child {display:none}"）
} write（"</STYLE>"）;
}}function getIndex（el） {
ind = null;
for （I=0; I<document.layers.length; I++） {
whichEl = document.layers[I];
if （whichEl.id == el） {
ind = I;
break;
}
}
return ind;}function arrange（） {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for （I=firstInd+1; I<document.layers.length; I++） {
whichEl = document.layers[I];
if （whichEl.visibility ！= "hide"） {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}}function initIt（）{
if （！ver4） return;
if （NS4） {
for （I=0; I<document.layers.length; I++） {
whichEl = document.layers[I];
if （whichEl.id.indexOf（"C"）！= -1） whichEl.visibility = "hide";
}
arrange（）;
}
else {
divColl = document.all.tags（"DIV"）;
for （I=0; I<divColl.length; I++） {
whichEl = divColl（I）;
if （whichEl.className == "child"） whichEl.style.display = "none";
} }}function expandIt（el） {
if （！ver4） return; if （IE4） {
whichEl1 = eval（el + "C"）;
for（I=1;I<=numTotal;I++）{
whichEl = eval（scores[I] + "C"）;
if（whichEl！=whichEl1） {
whichEl.style.display = "none";
}
}
whichEl1 = eval（el + "C"）;
if （whichEl1.style.display == "none"） {
whichEl1.style.display = "block";
}
else {
whichEl1.style.display = "none";
}
}
else {
whichEl = eval（"document." + el + "C"）;
for（I=1;I<=numTotal;I++）{
whichEl = eval（"document." + scores[I] + "C"）;
if（whichEl！=whichEl1） {
whichEl.visibility = "hide";
}
}
if （whichEl.visibility == "hide"） {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange（）;
}}onload = initIt;
</script>
</head>
<body bgcolor="" >
<div id="KB1P" class="parent"><a href="#" onClick="expandIt（"KB1"）; return false"> +时间日期类</a></div>
<div id="KB1C" class="child">
<a href="time1.htm" target="_target"> +任意位置显示时钟</a><br>
<a href="time2.htm" target="_target"> +倒计时代码生成器</a><br>
<a href="time3.htm" target="_target"> -八种风格时间显示</a><br>
<a href="time8.htm" target="_target"> -全中文日期显示</a></div>
<div id="KB2P" class="parent"><a href="#" onClick="expandIt（"KB2"）; return false"> +页面导航类</a></div>
<div id="KB2C" class="child">
<a href="dao1.htm" target="_target"> -显示站点信息导航</a><br>
<a href="dao9.htm" target="_target"> -友情链接导航框</a><br>
<a href="dao10.htm" target="_target"> -目录式导航菜单</a><br>
<a href="dao11.htm" target="_target"> -重要信息说明脚本</a> </div>
<div id="KB3P" class="parent"><a href="#" onClick="expandIt（"KB3"）; return false"> +页面背景类</a></div>
<div id="KB3C" class="child">
<a href="back1.htm" target="_target"> -背景向下移动</a><br>
<a href="back2.htm" target="_target"> -背景不停变换色彩</a><br>
<a href="back9.htm" target="_target"> -页面转换特效</a></div>
<div id="KB4P" class="parent"><a href="#" onClick="expandIt（"KB4"）; return false"> +页面特效类</a></div>
<div id="KB4C" class="child">
<a href="ye1.htm" target="_target"> -字符从空中掉下来</a><br>
<a href="ye17.htm" target="_target"> -鼠标响应文字变色</a> </div>
<div id="KB5P" class="parent"><a href="#" onClick="expandIt（"KB5"）; return false"> +图形图象类</a></div>
<div id="KB5C" class="child">
<a href="picture1.htm" target="_target"> -禁止图片下载</a><br>
<a href="picture11.htm" target="_target"> -图形选择脚本</a><br>
<a href="picture12.htm" target="_target"> -图片翻滚导航</a><br>
<a href="picture13.htm" target="_target"> -图片翻滚导航</a> </div>
<div id="KB6P" class="parent"><a href="#" onClick="expandIt（"KB6"）; return false"> +按钮特效类</a></div>
<div id="KB6C" class="child">
<a href="an2.htm" target="_target"> -跑马灯式链接说明</a><br>
<a href="an7.htm" target="_target"> -按顺序点击链接</a></div>
<div id="KB7P" class="parent"><a href="#" onClick="expandIt（"KB7"）; return false"> +鼠标事件类</a></div>
<div id="KB7C" class="child">
<a href="shu1.htm" target="_target"> -图片跟随鼠标</a><br>
<a href="shu5.htm" target="_target"> -禁用右键自动导航</a><br>
<a href="shu6.htm" target="_target"> -鼠标激活警告框</a> </div>
<div id="KB8P" class="parent"><a href="#" onClick="expandIt（"KB8"）; return false"> +Cookie脚本</a></div>
<div id="KB8C" class="child">
<a href="cook1.htm" target="_target"> -随登陆次数变提示</a><br>
<a href="cook8.htm" target="_target"> -检测IE去过站点</a><br>
<a href="cook9.htm" target="_target"> -离开时显示信息</a><br>
<a href="cook10.htm" target="_target"> -弹出窗口自动关闭</a><br>
<a href="cook11.htm" target="_target"> -离开页面弹出窗口</a><br>
<a href="cook12.htm" target="_target"> -进入时显示信息</a></div>
<div id="KB9P" class="parent"><a href="#" onClick="expandIt（"KB9"）; return false"> +文本特效类</a></div>
<div id="KB9C" class="child">
<a href="text1.htm" target="_target"> -随机信息显示</a><br>
<a href="ye9.htm" target="_target"> -文字颜色渐变脚本</a><br>
<a href="ye5.htm" target="_target"> -文本自动输出</a></div>
<div id="KB10P" class="parent"><a href="#" onClick="expandIt（"KB10"）; return false"> +状态栏特效</a></div>
<div id="KB10C" class="child">
<a href="ye8.htm" target="_target"> -状态栏跑马灯脚本</a><br>
<a href="zhuang1.htm" target="_target"> -文字从右弹出</a><br>
<a href="zhuang8.htm" target="_blank"> -title变化弹出</a></div>
<div id="KB11P" class="parent"><a href="#" onClick="expandIt（"KB11"）; return false"> +密码类</a></div>
<div id="KB11C" class="child">
<a href="password1.htm" target="_target"> -控制他人进入页面</a><br>
<a href="password3.htm" target="_target"> 用来实现会员制度</a><br>
<a href="password4.htm" target="_target"> -密码保护相应页面</a><br>
<a href="password5.htm" target="_target"> -自己编制密码表</a></div>
<div id="KB12P" class="parent"><a href="#" onClick="expandIt（"KB12"）; return false"> +综合类</a></div>
<div id="KB12C" class="child">
<a href="zh1.htm" target="_target"> -加密页面源代码</a><br>
<a href="zh2.htm" target="_target"> -访问时间限制</a><br>
<a href="zh11.htm" target="_target"> -搜索引擎登记</a><br>
<a href="zh12.htm" target="_target"> -下载记时器脚本</a> </div>
<div id="KB13P" class="parent"><a href="#" onClick="expandIt（"KB13"）; return false"> +游戏类</a></div>
<div id="KB13C" class="child"> <a href="you1.htm" target="_target"> -一款流行游戏</a></div>
<script language="javascript">
numTotal=14;
scores[1]="KB1";
scores[2]="KB1";
scores[3]="KB2";
scores[4]="KB3";
scores[5]="KB4";
scores[6]="KB5";
scores[7]="KB6";
scores[8]="KB7";
scores[9]="KB8";
scores[10]="KB9";
scores[11]="KB10";
scores[12]="KB11";
scores[13]="KB12";
scores[14]="KB13";
</script>
</body>
</html></td>
</tr>
</table>