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


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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Angular实现表单验证功能
Nov 13 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
Vue-Router的使用方法
Sep 05 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Python冲顶大会 快来答题!
2018/01/17 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python实现飞机大战小游戏
2019/11/08 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
String和StringBuffer的区别
2015/08/13 面试题
村创先争优活动总结
2014/08/28 职场文书
中学音乐课教学反思
2016/02/18 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
详解Vue的options
2021/05/15 Vue.js