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


Posted in Javascript onJuly 09, 2008

太激动了...竟然还发现有备份文件
<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+"  "+"<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://3water.com/jslib/EXTJS/code.htm
打包下载
仿163
仿126

Javascript 相关文章推荐
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
vue实现购物车的监听
Apr 20 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 #Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 #Javascript
SWFObject Flash js调用类
Jul 08 #Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 #Javascript
图片自动缩小 点击放大
Jul 07 #Javascript
超级退弹代码
Jul 07 #Javascript
Javascript入门学习资料收集整理篇
Jul 06 #Javascript
You might like
77A一级收信机修理记
2021/03/02 无线电
PHP 8新特性简介
2020/08/18 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python装饰器用法实例分析
2019/01/14 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
详解python中index()、find()方法
2019/08/29 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
玲玲的画教学反思
2014/02/04 职场文书
初三语文教学计划
2015/01/22 职场文书
毕业欢送会致辞
2015/07/29 职场文书
办公室卫生管理制度
2015/08/04 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Python中第三方库Faker的使用详解
2022/04/02 Python