JS后台菜单简易版（转）

frank1998819

浏览: 731343 次
性别:
来自: 南京

最近访客更多访客>>

lanzhiqiyue

spike_wq

cpongo1

dsyzhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<!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=utf-8" />
<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='off.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"><a href="###">导航一内容</a></div>
        <div id="c1" class="content"><a href="###">导航二内容</a></div>
        <div id="c2" class="content"><a href="###">导航三内容</a></div>
        <div id="c3" class="content"><a href="###">导航四内容</a></div>
        <div id="c4" class="content"><a href="###">导航五内容</a></div>
        <div id="c5" class="content"><a href="###">导航六内容</a></div>
        <div id="c6" class="content"><a href="###">导航七内容</a></div>
    </div>
</div>
<div id="footer">copyright for onestopweb </div>
</body>
</html>

分享到：

电商前端交易型系统设计原则（转） | Nginx配置upstream实现负载均衡（转）

2016-07-11 08:31
浏览 474
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论