Heim > Web-Frontend > js-Tutorial > 非常不错的功能强大代码简单的管理菜单美化版_javascript技巧

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

WBOY
Freigeben: 2016-05-16 19:02:56
Original
997 Leute haben es durchsucht

太激动了...竟然还发现有备份文件
<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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage