编程 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日历推荐

Dec 03 Javascript

你真的了解JavaScript吗？

Feb 24 Javascript

用示例说明filter()与find()的用法以及children()与find()的区别分析

Apr 26 Javascript

JavaScript中的索引数组、关联数组和静态数组、动态数组讲解

Nov 08 Javascript

JavaScript模拟重力状态下抛物运动的方法

Mar 03 Javascript

JQuery+Ajax实现数据查询、排序和分页功能

Sep 27 Javascript

js实现图片左右滚动效果

Feb 27 Javascript

Easyui Datagrid自定义按钮列(最后面的操作列)

Jul 13 Javascript

js使用Promise实现简单的Ajax缓存

Nov 14 Javascript

Servlet返回的数据js解析2种方法

Dec 12 Javascript

JavaScript实现复选框全选和取消全选

Nov 20 Javascript

JavaScript如何优化逻辑判断代码详解

Jun 08 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