左侧菜单点击变色效果

日期：2008年5月17日作者：查看:[大字体中字体小字体]

五一在家写的，和大家分享，支持所有浏览器,添加了左侧菜单点击变色效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} #top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;} #topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left} #topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;} #main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;} #leftMenu{width:150px;height:500px;background-color:#009900;float:left} #leftMenu ul{margin:10px;} #leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;} #leftMenu ul li a{color:#000000;text-decoration:none;} #content{width:750px;height:500px;float:left} .content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;} #footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;} .content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;} </style> <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="yellow"; //循环取得当前索引 for(j=0;j<8;j++){ if(this==ck[j]){ if($("p"+j)==null){ openNew(j,this.innerHTML);//设置标签显示文字 } clearStyle(); $("p"+j).style.backgroundColor="yellow"; 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='/img/2008-5-17/20085179223673017.gif' style='vertical-align:middle'/>"; //标签点击事件 tagMenu.onclick=function(evt){ clearMenu(); ck[id].style.background="yellow"; clearStyle(); tagMenu.style.backgroundColor="yellow"; 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.backgroundColor="yellow"; clearContent(); var cc=tags[tags.length-1].id.split("p"); $("c"+cc[1]).style.display="block"; clearMenu(); ck[cc[1]].style.background="yellow"; } else{ clearContent(); clearMenu(); $("welcome").style.display="block" } } } menu.appendChild(tagMenu); } //清除菜单样式 function clearMenu(){ for(i=0;i<ck.length;i++){ ck[i].style.background="#99CC00"; } } //清除标签样式 function clearStyle(){ for(i=0;i<tags.length;i++){ menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00"; } } //清除内容 function clearContent(){ for(i=0;i<7;i++){ $("c"+i).style.display="none"; } } } </script> </head> <body> <div id="top"> <h2>管理菜单</h2> <div id="topTags"> <ul> </ul> </div> </div> <div id="main"> <div id="leftMenu"> <ul> <li>个人资料</li> <li>相册管理</li> <li>日志管理</li> <li>留言管理</li> <li>风格管理</li> <li>系统管理</li> <li>帮助信息</li> </ul> </div> <div id="content"> <div id="welcome" class="content" style="display:block;"> <div align="center"> <p> </p> <p><strong>欢迎使用用户管理系统！</strong></p> <p> </p> </div> </div> <div id="c0" class="content">个人资料</div> <div id="c1" class="content">相册管理</div> <div id="c2" class="content">日志管理</div> <div id="c3" class="content">留言管理</div> <div id="c4" class="content">风格管理</div> <div id="c5" class="content">系统管理</div> <div id="c6" class="content">帮助信息</div> </div> </div> <div id="footer">copyright for lalasxc </div> </body> </html>
[1] [2] 下一页
左侧菜单点击变色效果相关文章：
·3DMax:跟我学做房间效果图
·Flash制作滚动广告图片效果
·Flash制作非常逼真的下雪视觉动画效果
·对联广告代码效果大全
·Photoshop制作Lomo风格非主流效果
·对联广告JS代码效果大全
·Flash中百叶窗效果的实现
·网页对联广告代码效果大全
·3DS MAX图文教程：事件驱动粒子系统——喷泉效果
·Photoshop制作飘落雪花效果图
左侧菜单点击变色效果相关软件
·麦克风混响效果器 V1.0 绿色版
·疯狂水果机(Fruit Machine Mania)
·SRS Audio Sandbox(声卡效果增强软件) V1.9.0.2 汉化版
·联众青苹果之游戏马算牌器 V3.0 Build 5.0206 正式版
·珊瑚青苹果Flash播放软件 V2.1
·胜利之日:起源电影效果演示
·甜蜜糖果
·水果派(TipTop)
·糖果玛丽
·《星苹果乐园》张芯瑜写真壁纸

上一篇:新手快速学习制作网站ICON的步骤

下一篇:php入门交流:鼓励学习PHP的新手

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐

·鼠标单击连接在网页中弹出个性提示小窗口