首页 > web前端 > js教程 > 非常不错的功能强大代码简单的管理菜单美化版_javascript技巧

非常不错的功能强大代码简单的管理菜单美化版_javascript技巧

WBOY
发布: 2016-05-16 19:02:56
原创
997 人浏览过

太激动了...竟然还发现有备份文件
<script> <BR>window.onload=function(){ <BR>function $(id){return document.getElementById(id)} <BR>var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器 <BR>var tags=menu.getElementsByTagName("li");//顶部菜单 <BR>var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单 <BR>var j; <BR>//点击左侧菜单增加新标签 <BR>for(i=0;i<ck.length;i++){ <BR>ck[i].onclick=function(){ <BR>$("welcome").style.display="none"//欢迎内容隐藏 <BR>clearMenu(); <BR>this.style.background='url(images/tabbg02.gif)' <BR>//循环取得当前索引 <BR>for(j=0;j<8;j++){ <BR>if(this==ck[j]){ <BR>if($("p"+j)==null){ <BR>openNew(j,this.innerHTML);//设置标签显示文字 <BR> } <BR>clearStyle(); <BR>$("p"+j).style.background='url(images/tabbg1.gif)'; <BR>clearContent(); <BR>$("c"+j).style.display="block"; <BR> } <BR> } <BR>return false; <BR> } <BR> } <BR>//增加或删除标签 <BR>function openNew(id,name){ <BR>var tagMenu=document.createElement("li"); <BR>tagMenu.id="p"+id; <BR>tagMenu.innerHTML=name+" "+"<img src='images/off.gif' style="max-width:90%"/ alt="非常不错的功能强大代码简单的管理菜单美化版_javascript技巧" >"; <BR>//标签点击事件 <BR>tagMenu.onclick=function(evt){ <BR>clearMenu(); <BR>ck[id].style.background='url(images/tabbg02.gif)' <BR>clearStyle(); <BR>tagMenu.style.background='url(images/tabbg1.gif)'; <BR>clearContent(); <BR>$("c"+id).style.display="block"; <BR>} <BR>//标签内关闭图片点击事件 <BR>tagMenu.getElementsByTagName("img")[0].onclick=function(evt){ <BR>evt=(evt)?evt:((window.event)?window.event:null); <BR>if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为; <BR>this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签 <BR>var color=tagMenu.style.backgroundColor; <BR>//设置如果关闭一个标签时,让最后一个标签得到焦点 <BR>if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释 <BR>if(tags.length-1>=0){ <BR>clearStyle(); <BR>tags[tags.length-1].style.background='url(images/tabbg1.gif)'; <BR>clearContent(); <BR>var cc=tags[tags.length-1].id.split("p"); <BR>$("c"+cc[1]).style.display="block"; <BR>clearMenu(); <BR>ck[cc[1]].style.background='url(images/tabbg1.gif)'; <BR> } <BR>else{ <BR>clearContent(); <BR>clearMenu(); <BR>$("welcome").style.display="block" <BR> } <BR> } <BR>} <BR>menu.appendChild(tagMenu); <BR>} <BR>//清除菜单样式 <BR>function clearMenu(){ <BR>for(i=0;i<ck.length;i++){ <BR>ck[i].style.background='url(images/tabbg01.gif)'; <BR> } <BR>} <BR>//清除标签样式 <BR>function clearStyle(){ <BR>for(i=0;i<tags.length;i++){ <BR>menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)'; <BR> } <BR>} <BR>//清除内容 <BR>function clearContent(){ <BR>for(i=0;i<7;i++){ <BR>$("c"+i).style.display="none"; <BR> } <BR>} <BR>} <BR></script>

在线演示http://www.jb51.net/jslib/EXTJS/code.htm
打包下载
仿163
仿126

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板