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

JavaScript 异步调用框架 (Part 6 - 实例 & 模式)

Aug 04 Javascript

js本身的局限性别让javascript做太多事

Mar 23 Javascript

js 完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造而来

Nov 21 Javascript

Extjs4 类的定义和扩展实例

Jun 28 Javascript

7个让JavaScript变得更好的注意事项

Jan 28 Javascript

JavaScript实现选中文字提示新浪微博分享效果

Jun 15 Javascript

angular中实现li或者某个元素点击变色的两种方法

Jul 27 Javascript

jQuery时间戳和日期相互转换操作示例

Dec 07 jQuery

Layui数据表格跳转到指定页的实现方法

Sep 05 Javascript

使用layui的layer组件做弹出层的例子

Sep 27 Javascript

详解实现vue的数据响应式原理

Jan 20 Vue.js

vue 给数组添加新对象并赋值

Apr 20 Vue.js

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