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

 更新时间:2008年07月09日 22:47:06   作者:  
由于网盘不稳定,很多时候文件提示找不到,幸好U盘里存了. 喜欢这3个风格的朋友们别在PM我啦.....我把文件传到我服务器上了..
太激动了...竟然还发现有备份文件
<script type="text/javascript">
window.onload=function(){
function $(id){return document.getElementById(id)}
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
var tags=menu.getElementsByTagName("li");//顶部菜单
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
var j;
//点击左侧菜单增加新标签
for(i=0;i<ck.length;i++){
ck[i].onclick=function(){
$("welcome").style.display="none"//欢迎内容隐藏
clearMenu();
this.style.background='url(images/tabbg02.gif)'
//循环取得当前索引
for(j=0;j<8;j++){
if(this==ck[j]){
if($("p"+j)==null){
openNew(j,this.innerHTML);//设置标签显示文字
 }
clearStyle();
$("p"+j).style.background='url(images/tabbg1.gif)';
clearContent();
$("c"+j).style.display="block";
   }
 }
return false;
  }
 }
//增加或删除标签
function openNew(id,name){
var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+"&nbsp;&nbsp;"+"<img src='images/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick=function(evt){
clearMenu();
ck[id].style.background='url(images/tabbg02.gif)'
clearStyle();
tagMenu.style.background='url(images/tabbg1.gif)';
clearContent();
$("c"+id).style.display="block";
}
//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
evt=(evt)?evt:((window.event)?window.event:null);
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
var color=tagMenu.style.backgroundColor;
//设置如果关闭一个标签时,让最后一个标签得到焦点
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
if(tags.length-1>=0){
clearStyle();
tags[tags.length-1].style.background='url(images/tabbg1.gif)';
clearContent();
var cc=tags[tags.length-1].id.split("p");
$("c"+cc[1]).style.display="block";
clearMenu();
ck[cc[1]].style.background='url(images/tabbg1.gif)';
 }
else{
clearContent();
clearMenu();
$("welcome").style.display="block"
   }
  }
}
menu.appendChild(tagMenu);
}
//清除菜单样式
function clearMenu(){
for(i=0;i<ck.length;i++){
ck[i].style.background='url(images/tabbg01.gif)';
 }
}
//清除标签样式
function clearStyle(){
for(i=0;i<tags.length;i++){
menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)';
  }
}
//清除内容
function clearContent(){
for(i=0;i<7;i++){
$("c"+i).style.display="none";
 }
}
}
</script>

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

相关文章

  • javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

    javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

    这篇文章主要介绍了javascript数据结构之多叉树经典操作,简单描述了多叉树的概念,并结合实例形式分析了javascript多叉树的创建、添加、遍历、移除等常见操作方法,需要的朋友可以参考下
    2018-08-08
  • options预检请求的前后端解决方式详解

    options预检请求的前后端解决方式详解

    这篇文章主要为大家介绍了options预检请求的前后端解决方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。本文通过实例代码给大家讲解Bootstrap所支持的表单控件,感兴趣的朋友一起学习吧
    2016-05-05
  • 浅谈javascript中this在事件中的应用

    浅谈javascript中this在事件中的应用

    这篇文章主要介绍了浅谈javascript中this在事件中的应用实例,非常有助于我们对this关键字的理解,这里推荐给大家。
    2015-02-02
  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效

    放在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,喜欢的朋友可以收藏下
    2013-11-11
  • 利用Webpack实现小程序多项目管理的方法

    利用Webpack实现小程序多项目管理的方法

    这篇文章主要介绍了利用Webpack实现小程序多项目管理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 在微信小程序中使用mqtt服务的方法

    在微信小程序中使用mqtt服务的方法

    这篇文章主要介绍了在微信小程序中使用mqtt服务的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 微信小程序中使用vant框架的具体步骤

    微信小程序中使用vant框架的具体步骤

    本文主要介绍了微信小程序中使用vant框架的具体步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JavaScript中call、apply、bind实现原理详解

    JavaScript中call、apply、bind实现原理详解

    其实在很多文章都会写call,apply,bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下
    2021-06-06
  • JS实现为表格动态添加标题的方法

    JS实现为表格动态添加标题的方法

    这篇文章主要介绍了JS实现为表格动态添加标题的方法,涉及javascript中createCaption方法添加标题的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论