后台管理系统界面和样式,点击左边新建标签效果
后台管理系统界面和样式,点击左边新建标签效果
<!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>www.lanrentuku.com</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"//欢迎内容隐藏
//循环取得当前索引
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='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick=function(evt){
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";
}
else{
clearContent();
$("welcome").style.display="block"
}
}
}
menu.appendChild(tagMenu);
}
//清除标签样式
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>
来源懒人
转载于:https://www.cnblogs.com/sendling/archive/2008/12/27/1363451.html
后台管理系统界面和样式,点击左边新建标签效果相关推荐
- 基于angular4+ng-bootstrap+bootstrap+scss的后台管理系统界面
描述 在angular2刚才发布的不久,很多人不懂得怎么应用,直到现在也很多人不懂怎么用, 于是我在余业时间做了这么一个后台管理系统页面,希望对大家有帮助!! 从我个人的感觉来说,angular2语法 ...
- layui实现后台管理系统界面(亲测可用)
使用的是最新的layui2.5.6 1.UI效果 2.代码 需要根据自己的项目,对下面代码中注释了TODO的地方进行修改.(当然,至于其他js/css文件也需要具体情况具体修改) (下面的代码只是管理 ...
- 34个漂亮的应用程序后台管理系统界面(系列二)
今天这篇文章收集了34个漂亮的应用程序后台管理界面分享给大家.这些界面都是来自themeforest网站,虽然直接下载需要付费的,不过大部分都提供了在线预览,所以完全能够复制下来,有的提供了预览图,设 ...
- Element ui后台管理系统界面设计
自己学了一点Element ui前端框架,然后尝试设计了几个页面,仅供学习参考!
- zsy后台管理系统-界面
zsy框架:(java+vue+mysql) 欢迎大家预览,指导! http://www.zsyai.top/zsy-crm/dist/index.html#/login 用户名:root 密码: ...
- elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言 大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
- 【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局
前言 大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
- pyqt界面屏幕分辨率自适应_后台系统界面设计踩过的那些坑
源起 由于之前曾经在后台系统开发公司工作过的缘故,所以有些后台管理系统界面的产出.后来虽然从那家公司离职,但也接到过一些后台界面设计和优化的项目,前前后后也快十来个了. 这里想分享下一些关于后台界面设 ...
- AdminEx后台管理系统模板、用户权限管理设计、按钮级别
一.前言 最近有时间研究了一下做后台管理系统的模板界面,开源的比较知名很早之前就用过EasyUI.Vue+ElementUI,Layui,Bootstrap等. EasyUI个人感觉功能强大,帮助we ...
最新文章
- JDK相关版本特性浏览
- android studio ndk 书籍,NDK 在AndroidStudio3.2.1版本集成方法(ndk-build方式)
- linux启动报错+centos关闭和开启ipv6
- 风靡硅谷营销界的 MarTech 魔术
- 消息 245,级别 16,状态 1,第 1 行 在将 varchar 值 '2,8' 转换成数据类型 int 时失败。...
- 使用loadrunner编写webservice接口请求
- ubuntu phpmyadmin 404 not found
- “C语言之父”40年前搞的操作系统复活,Linux、Windows都借鉴过它
- 免费漫画系统,漫城cms内容管理系统,免费原生app
- C语言规律,C语言中运算符结合型规律
- 如何自学VR虚拟现实技术?VR简单上手教程
- 工程文件参考——CubeMX+STM32F4+FreeRTOS+IIC实现JY901通讯
- 百度地图 web 开发 BMap.point格式
- 手机lightroom预设位置
- Proteus中的继电器在哪里
- AI成为硬件增效“杀手锏”,百度输入法的「To B」探索
- 使用命令行进行文件操作
- fastposter v2.11.0 天花板级的海报生成器
- BP神经网络的一些例子
- 835计算机原理,电子科技大学835线性代数考研资料汇总
热门文章
- qq分享提示设备未授权_QQ帐号已经可以注销了,过去几天,第一批尝试的人已经放弃了!...
- oracle 分段函数,transcad概述强大的交通gis.pdf
- 科技论文的英文表达-----如何写好科技论文之我见(六)
- arXiv 2019 《DCA: Diversified Co-Attention towards Informative Live Video Commenting》论文笔记
- 【做题记录】Codeforces做题记录
- oracle开发项目流程,如何开发ORACLE存储过程
- 2021-03-07 英文写作中的“so that“和“such that“
- helm istio k8s docker
- Linux从入门到精通——Apache
- Acess link