Css+div+javascript Making sliding door menu technology

Css|javascript| Menu

<style>body {font-size:12px;font-family: XXFarEastFont-}ul. Tabbarlevel1{list-style:none;margin:0;padding:0;height:29px;background-image:url (20060409082237_tabbar_level1_ Bk.gif);} Ul. TabBarLevel1 Li{float:left;padding:0;height:29px;margin-right:1px;background:url (20060409082248_tabbar_level1_ Slice_left_bk.gif) left top no-repeat; Ul. TabBarLevel1 Li a{display:block;line-height:29px;padding:0 20px;color: #333 background:url (20060409082257_tabbar_level1_slice_right_bk.gif) Right top no-repeat;white-space: nowrap;} Ul. TabBarLevel1 Li. Selected{background:url (20060409082312_tabbar_level1_slice_selected_left_bk.gif) left top no-repeat Ul. TabBarLevel1 Li. Selected A{background:url (20060409082323_tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;} Ul. TabBarLevel1 Li A:link,ul. TabBarLevel1 Li A:visited{color: #333;} Ul. TabBarLevel1 Li A:hover,ul. TabBarLevel1 Li A:active{color: #F30; text-decoration:none;} Ul. TabBarLevel1 Li. Selected A:link,ul. TabBarLevel1 Li. Selected a:visited{color: #000;} Ul. TabbarlEvel1 Li. Selected A:hover,ul. TabBarLevel1 Li. Selected a:active{color: #F30; text-decoration:none;} Div. Hackbox {padding:2px 2px; border-left:2px solid #6697CD; border-right:2px solid #6697CD; border-bottom:2px solid #6697CD; Display:none;} </style><div id= "Whatever" ><ul class= "TabBarLevel1" id= "TabPage1" ><li id= "TAB1" ><a href= "#" > Baby details </a></li><li id= "Tab2" class= "Selected" ><a href= "#" > Other information </a></li> <li id= "Tab3" ><a href= "#" > Bid record </a></li><li id= "TAB4" ><a href= "#" > Guest Book </a> </li></ul><div id= "cnt" ><div id= "DTab1" class= "Hackbox" > Code as follows: <!--put information here--> haha 1</div><div id= "dTab2" class= "Hackbox" style= "Display:block" > Code as follows: <!-- Put information here--> haha haha 2</div><div id= "dTab3" class= "Hackbox" > Code as follows: <!--put information here-- > Ha ha 3&LT;/DIV&GT;<div id= "DTAB4" class= "Hackbox" > Code as follows: <!--put information here--> haha haha 4</div></d Iv></div><script language= "JavaScript" >//switch tab effectfunction switchtab (tabpage,tabid) {var oIt EM = document.getElementById (TabPage); for (Var i=0;i<oitem.children.length;i++) {var x = Oitem.children (i); x.classname = ""; var y = X.getelementsbytagname (' A '); y[0].style.color= "#333333";} document.getElementById (tabid). ClassName = "Selected"; var Dvs=document.getelementbyid ("CNT"). getElementsByTagName ("div"); for (Var i=0;i<dvs.length;i++) {if (dvs[i].id== (' d ' +tabid)) dvs[i].style.display= ' block '; Else dvs[i].style.display= ' None ';} </script>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]