编程 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 相关文章推荐

禁止IE用右键的JS代码

Dec 30 Javascript

JavaScript在for循环中绑定事件解决事件参数不同的情况

Jan 20 Javascript

javascript动态创建链接的方法

May 13 Javascript

JavaScript中setFullYear()方法的使用详解

Jun 11 Javascript

js和C# 时间日期格式转换的简单实例

May 28 Javascript

JavaScript中闭包的写法和作用详解

Jun 29 Javascript

清除浏览器缓存的几种方法总结(必看)

Dec 09 Javascript

浅谈Vue.nextTick 的实现方法

Oct 25 Javascript

jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】

Aug 28 jQuery

Vue入门之数量加减运算操作示例

Dec 11 Javascript

vue中多路由表头吸顶实现的几种布局方式

Apr 12 Javascript

使用Node.js实现base64和png文件相互转换的方法

Mar 11 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