<!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>JS可編輯后臺(tái)菜單</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");//左側(cè)菜單
  var j;
  //點(diǎn)擊左側(cè)菜單增加新標(biāo)簽
  for(i=0;i<ck.length;i++){
    ck[i].onclick=function(){
      $("welcome").style.display="none"http://歡迎內(nèi)容隱藏
      clearMenu();
      this.style.background="yellow";
      //循環(huán)取得當(dāng)前索引
      for(j=0;j<8;j++){
        if(this==ck[j]){
          if($("p"+j)==null){
            openNew(j,this.innerHTML);//設(shè)置標(biāo)簽顯示文字
          }
        clearStyle();
        $("p"+j).style.backgroundColor="yellow";
        clearContent();
        $("c"+j).style.display="block";
        }
      }
      return false;
    }
  }
  //增加或刪除標(biāo)簽
  function openNew(id,name){
    var tagMenu=document.createElement("li");
    tagMenu.id="p"+id;
    tagMenu.innerHTML=name+"  "+"<img src='close.gif' style='vertical-align:middle'/>";
    //標(biāo)簽點(diǎn)擊事件
    tagMenu.onclick=function(evt){
      clearMenu();
      ck[id].style.background="yellow";
      clearStyle();
      tagMenu.style.backgroundColor="yellow";
      clearContent();
      $("c"+id).style.display="block";
    }
    //標(biāo)簽內(nèi)關(guān)閉圖片點(diǎn)擊事件
    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);//刪除當(dāng)前標(biāo)簽
      var color=tagMenu.style.backgroundColor;
      //設(shè)置如果關(guān)閉一個(gè)標(biāo)簽時(shí)，讓最后一個(gè)標(biāo)簽得到焦點(diǎn)
      if(color=="#ffff00"||color=="yellow"){//區(qū)別瀏覽器對(duì)顏色解釋
        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";
    }
  }
  //清除標(biāo)簽樣式
  function clearStyle(){
    for(i=0;i<tags.length;i++){
      menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
    }
  }
  //清除內(nèi)容
  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>導(dǎo)航一</li>
      <li>導(dǎo)航二</li>
      <li>導(dǎo)航三</li>
      <li>導(dǎo)航四</li>
      <li>導(dǎo)航五</li>
      <li>導(dǎo)航六</li>
      <li>導(dǎo)航七</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="###">導(dǎo)航一內(nèi)容</a></div>
    <div id="c1" class="content"><a href="###">導(dǎo)航二內(nèi)容</a></div>
    <div id="c2" class="content"><a href="###">導(dǎo)航三內(nèi)容</a></div>
    <div id="c3" class="content"><a href="###">導(dǎo)航四內(nèi)容</a></div>
    <div id="c4" class="content"><a href="###">導(dǎo)航五內(nèi)容</a></div>
    <div id="c5" class="content"><a href="###">導(dǎo)航六內(nèi)容</a></div>
    <div id="c6" class="content"><a href="###">導(dǎo)航七內(nèi)容</a></div>
  </div>
</div>
<div id="footer">copyright jb51.net </div>
</body>
</html>

運(yùn)行效果圖如下：