值得收藏的带自动选项卡生成的后台管理界面

稿源：互联网 2022-04-27 16:38:13 点击： 7934 撤稿纠错

经常用到的后台管理自动选项卡，选项卡内容可以自定义。

以下讨论的是和js 后台管理选项卡相关的值得收藏的带自动选项卡生成的后台管理界面教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br><title>无标题文档</title><br><style type="text/css"><br>body{font-size:12px;}<br>ul,li,h2{margin:0;padding:0;}<br>ul{list-style:none;}<br>#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}<br>#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}<br>#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left}<br>#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}<br>#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;}<br>#leftMenu{width:150px;height:500px;background-color:#009900;float:left}<br>#leftMenu ul{margin:10px;}<br>#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}<br>#leftMenu ul li a{color:#000000;text-decoration:none;}<br>#content{width:750px;height:500px;float:left}<br>.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}<br>#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;}<br>.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}<br></style><br><script type="text/javascript"><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>//循环取得当前索引<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.backgroundColor="yellow";<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+"&nbsp;&nbsp;&nbsp;"+"<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>";<br>//标签点击事件<br>tagMenu.onclick=function(evt){<br>clearStyle();<br>tagMenu.style.backgroundColor="yellow";<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.backgroundColor="yellow";<br>clearContent();<br>var cc=tags[tags.length-1].id.split("p");<br>$("c"+cc[1]).style.display="block";<br> }<br>else{<br>clearContent();<br>$("welcome").style.display="block"<br>   }<br>  }<br>}<br>menu.appendChild(tagMenu);<br>}<br>//清除标签样式<br>function clearStyle(){<br>for(i=0;i<tags.length;i++){<br>menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";<br>  }<br>}<br>//清除内容<br>function clearContent(){<br>for(i=0;i<7;i++){<br>$("c"+i).style.display="none";<br> }<br>}<br>}<br></script><br></head><br><body><br><div id="top"><br><h2>管理菜单</h2><br><div id="topTags"><br><ul><br></ul><br></div><br></div><br><div id="main"> <br><div id="leftMenu"><br><ul><br><li>个人资料</li><br><li>相册管理</li><br><li>日志管理</li><br><li>留言管理</li><br><li>风格管理</li><br><li>系统管理</li><br><li>帮助信息</li><br><li>再加一个</li><br></ul><br></div><br><div id="content"><br><div id="welcome" class="content" style="display:block;"><br>  <div align="center"><br>    <p>&nbsp;</p><br>    <p><strong>欢迎使用用户管理系统！</strong></p><br>    <p>&nbsp;</p><br>    </div><br></div><br><div id="c0" class="content">个人资料</div><br><div id="c1" class="content">相册管理</div><br><div id="c2" class="content">日志管理</div><br><div id="c3" class="content">留言管理</div><br><div id="c4" class="content">风格管理</div><br><div id="c5" class="content">系统管理</div><br><div id="c6" class="content">帮助信息</div><br></div><br></div><br><div id="footer">copyright for lalasxc </div><br></body><br></html></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于值得收藏的带自动选项卡生成的后台管理界面的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200805071222.shtml方便下次再访问哦。

·上一篇： 能伸展开和收缩的动态图层效果
·下一篇： 动态删减选项卡的效果示例

值得收藏的带自动选项卡生成的后台管理界面

文章分类LIST >>返回首页

最新游戏

最新新闻