<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> cloud-dwelling community _www.jb51.net_ Simple Management menu </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} #leftMenuul{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;o verflow-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];//top menu container var tags= Menu.getelementsbytagname ("Li");//Top menu var ck=$ ("Leftmenu"). getElementsByTagName ("ul") [0].getelementsbytagname (" Li ");//left menu Var J; Click on the left menu to add a new label for (i=0;i<ck.length;i++) {ck[i].onclick=function () {$ ("Welcome"). Style.displaY= "None"//welcome content Hide//Loop get current index for (j=0;j<8;j++) {if (This==ck[j]) {if ($ ("P" +j) ==null) {opennew (j,this.innerhtml); Set label display text} clearstyle (); $ ("P" +j). style.backgroundcolor= "Yellow"; ClearContent (); $ ("C" +j). style.display= "Block"; return false; }//Add or remove Tag function opennew (id,name) {var tagmenu=document.createelement ("Li"); Tagmenu.id= "P" +id; Tagmenu.innerhtml=name+ " " + ""; Tag Click event Tagmenu.onclick=function (evt) {Clearstyle (); Tagmenu.style.backgroundcolor= "Yellow"; ClearContent (); $ ("C" +id). style.display= "Block"; }//tags within the close picture Click event Tagmenu.getelementsbytagname ("img") [0].onclick=function (evt) {evt= (evt)? EVT: ((window.event)? Window.event:null); if (evt.stoppropagation) {evt.stoppropagation ()}//Cancel opera and safari bubbling behavior; This.parentNode.parentNode.removeChild (Tagmenu);//delete current label Var Color=tagmenu.style.backgroundcolor; Setting if you close a label, let the last tab get focus if (color== "#ffff00" | | color== "Yellow") {//Difference browser to color interpretation 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); //clear Tag style function Clearstyle () {for (i=0;i<tags.length;i++) {menu.getelementsbytagname ("li") [i]. Style.backgroundcolor= "#FFCC00"; }//clear content function clearcontent () {for (i=0;i<7;i++) {$ ("C" +i). style.display= "None"; }} </script> </pead> <body> <div id= "Top" > <p> Management menu </p> <div id= "Toptag S "> <ul> </ul> </div> </div> <div id=" main "> <div id=" Leftmenu "> <ul> <li> profile </li> <li> album Management </li> <li> Log Management </li> <li> message Management </li> <li> Style management </li> <li> System Management </li> <li> Help information </li> </ul> </div> <div id= "Content" ; <div id= "Welcome" Class= "Content" > <div align= "center" > <p> </p> <p><strong> Welcome to use User Management system! </strong></p> <p> </p> </div> </div> <div id= "C0" class= "Content" & GT, Profile </div> <div id= "C1" class= "Content" > Album Management </div> <div id= "C2" class= "Content" > Log management </ Div> <div Id= "C3" class= "Content" > Message management </div> <div id= "C4" class= "Content" > Style management </div> < DIV id= "c5" class= "Content" > System administration </div> <div id= "c6" class= "Content" > Help information </div> </div> < /div> <div id= "Footer" >copyright for lalasxc </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
