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 相关文章推荐
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 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
You might like
小文件php+SQLite存储方案
2010/09/04 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
php 修改密码实现代码
2017/05/24 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
用python写爬虫简单吗
2020/07/28 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Python图像读写方法对比
2020/11/16 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
个人能力自我鉴赏
2014/01/25 职场文书
质量承诺书范文
2014/03/27 职场文书
2015年护士节慰问信
2015/03/23 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
vue中data里面的数据相互使用方式
2022/06/05 Vue.js