编程 Javascript

javascript 树形导航菜单实例代码

Posted in Javascript onAugust 13, 2013

<!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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js模拟弹出效果代码修正版

Aug 07 Javascript

关于js datetime的那点事

Nov 15 Javascript

javascript模拟枚举的简单实例

Mar 06 Javascript

javascript 获取浏览器版本

Jan 21 Javascript

JavaScript编写检测用户所使用的浏览器的代码示例

May 05 Javascript

javascript动画之模拟拖拽效果篇

Sep 26 Javascript

html、css和jquery相结合实现简单的进度条效果实例代码

Oct 24 Javascript

Javascript中关于Array.filter()的妙用详解

Dec 04 Javascript

js模糊查询实例分享

Dec 26 Javascript

JavaScript设计模式之代理模式简单实例教程

Jul 03 Javascript

Vue 实现列表动态添加和删除的两种方法小结

Sep 07 Javascript

JS使用iView的Dropdown实现一个右键菜单

May 06 Javascript

Jquery操作下拉框(DropDownList)实现取值赋值

Aug 13 #Javascript

javascript实现div浮动在网页最顶上并带关闭按钮效果实例

Aug 13 #Javascript

鼠标经过显示二级菜单js特效

Aug 13 #Javascript

Jquery实现搜索框提示功能示例代码

Aug 13 #Javascript

jquery固定底网站底部菜单效果

Aug 13 #Javascript

js 三级关联菜单效果实例

Aug 13 #Javascript

js 单击式的下拉菜单效果实例

Aug 13 #Javascript