<! 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> untitled document </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: # cc00}
# 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]; // top menu container
VaR tags = menu. getelementsbytagname ("Li"); // top menu
VaR ck = $ ("leftmenu"). getelementsbytagname ("Ul") [0]. getelementsbytagname ("Li"); // left menu
VaR J;
// Click the left-side menu to add a new tag.
For (I = 0; I <CK. length; I ++ ){
CK [I]. onclick = function (){
$ ("Welcome"). style. Display = "NONE" // hide the welcome content
// Obtain the current index cyclically
For (j = 0; j <8; j ++ ){
If (this = ck [J]) {
If ($ ("p" + J) = NULL ){
Opennew (J, this. innerhtml); // sets the Label display text.
}
Clearstyle ();
$ ("P" + J). style. backgroundcolor = "yellow ";
Clearcontent ();
$ ("C" + J). style. Display = "Block ";
}
}
Return false;
}
}
// Add or delete tags
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 ";
}
// Close the image click event in the tag
Tagmenu. getelementsbytagname ("IMG") [0]. onclick = function (EVT ){
EVT = (EVT )? EVT :( (window. Event )? Window. Event: NULL );
If (EVT. stoppropagation) {EVT. stoppropagation ()} // cancels the bubble action of opera and Safari;
This. parentnode. parentnode. removechild (tagmenu); // Delete the current tag
VaR color = tagmenu. style. backgroundcolor;
// Set the focus of the last Tag if the tag is disabled.
If (color = "# FFFF00" | color = "yellow") {// difference the browser's explanation of the color
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 the label 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>
</Head>
<Body>
<Div id = "TOP">
<H2> Management menu </H2>
<Div id = "toptags">
<Ul>
</Ul>
</Div>
</Div>
<Div id = "Main">
<Div id = "leftmenu">
<Ul>
<Li> Personal Data </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>
<Li> Add one more </LI>
</Ul>
</Div>
<Div id = "content">
<Div id = "welcome" class = "content" style = "display: block;">
<Div align = "center">
<P> </P>
<P> <strong> welcome to the user management system! </Strong> </P>
<P> </P>
</Div>
</Div>
<Div id = "C0" class = "content"> Personal Data </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 management </div>
<Div id = "C6" class = "content"> help information </div>
</Div>
</Div>
<Div id = "footer"> copyright for lalasxc </div>
</Body>
</Html>
