这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
纯 js 实现的三级下拉菜单效果的代码,需要的朋友可以参考下。
三级下拉菜单的实现:
- function list(idstr){
- var name1="subtree"+idstr;
- var name2="img"+idstr;
- var objectobj=document.all(name1);
- var imgobj=document.all(name2);
- //alert(imgobj);
- if(objectobj.style.display=="none"){
- for(i=1;i<22;i++){
- var name3="img"+i;
- var name="subtree"+i;
- var o=document.all(name);
- if(o!=undefined){
- o.style.display="none";
- var image=document.all(name3);
- //alert(image);
- image.src="<%=basePath%>admin/images/ico04.gif";
- if(idstr>12&&idstr<20){
- document.getElementById("subtree11").style.display="";
- document.getElementById("img11").src="<%=basePath%>admin/images/ico03.gif";
- }
- }
- }
- objectobj.style.display="";
- imgobj.src="<%=basePath%>admin/images/ico03.gif";
- }
- else{
- objectobj.style.display="none";
- imgobj.src="<%=basePath%>admin/images/ico04.gif";
- }
- }
代码讲解:如
上,idstr 是一个数字字符,用于区别不同的子菜单和图片。通过 document.all(name1) 拿到所有的 id 为 name1(一变量)的子菜单,这里
其实只有一个,判断如果当前是隐藏状态,则进入循环,又如果元素有定义(为了方便,通过 i 取到的有些子菜单可能是未定义的)就把所有子菜单隐藏掉(除了 1 级菜单,包括 2、3 级菜单)、换掉当前同级菜单图标,最后把当前选中菜单显示出来、换掉当前选中的图标。有种特殊情况:当 idstr>12&&idstr<20 时候,这时正是第二级菜单激活第三级菜单展开的时候,如下图:选中论文管理,因为成果管理是论文管理的父菜单,成果管理不能隐藏,于是有 if(idstr>12&&idstr<20) 后面的代码块。最后的 else 就很好理解了,如果当前被选中菜单展开就隐藏掉,并换掉图标。
- function tupian(idt){
- var nametu="xiaotu"+idt;
- var tp = document.getElementById(nametu);
- tp.src="<%=basePath%>admin/images/ico05.gif";//图片ico05为白色的正方形
- for(var i=1;i<32;i++)
- {
- var nametu2="xiaotu"+i;
- if(i!=idt*1)
- {
- var tp2=document.getElementById('xiaotu'+i);
- if(tp2!=undefined)
- {tp2.src="<%=basePath%>admin/images/ico06.gif";}//图片ico06为蓝色的正方形
- }
- }
- }
代码说明:只是换掉图标而已,表示激活或失活。
来源: http://www.phperz.com/article/17/0701/283079.html