<Style> <br/> <! -- <Br/> # tab {width: 600px; Height: 260px; }< br/> # tab H3 {float: Left; width: 121px; line-Height: 26px; margin: 0-1px 0 0; font-size: 16px; text-align: center; color: # ff00ff; Background: # aacc33 ;} <br/> # tab ul {margin: 10px 0; List-style: None ;}< br/> # tab Div {display: none; width: 600px; height: 224px ;}< br/> # tab Li {float: Left; width: 50%; Background: #123456 ;}< br/> # tab Li a {display: block; line-Height: 25px; m Argin-left: 8%; font-size: 14px; text-Decoration: none; color: # ffffff ;}< br/> # tab Li A: hover {text-Decoration: underline; color: Red ;}< br/> # tab. block {display: block ;}< br/> # tab. up {Background: Blue ;} <br/> // --> <br/> </style> </P> <p> <body> <br/> <Div id = "tab"> <br /> <H3 onclick = "go_to (1) "> select one </p> <br/> <H3 onclick =" go_to (2) "> select 2 </p> <br/> <H3 onclick =" go_to (3) "> select 3 </p> <br/> <H3 onclick =" go_to (4) "> select IV </p> <br/> <H3 onclick = "go_to (5) "> select 5 </p> </P> <p> <Div class =" Block "> <br/> <ul> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br /> <li> <a href = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </ a> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br /> <li> <a HRE F = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br/> <li> <a href = "#"> 11111111111 </A> </LI> <br/> <li> <a href = "#"> 11111111111 </a> </LI> <br/> </ul> <br/> </div> <br/> <ul> <br/> <li> <a href = "#"> 22222222222 </> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 2222 2222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </Li> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </LI> <br/> <li> <a href = "#"> 22222222222 </a> </Li> <br/> </ul> <br/> </div> <br/> <div> <br /> <Ul> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> <Li> <a href = "#"> 33333333333 </a> </LI> <br/> <li> <a href = "#"> 33333333333 </> </LI> <br/> <li> <a href = "#"> 33333333333 </a> </LI> <br/> </ul> <br/> </div> <br/> <ul> <br/> <li> <a href = "#"> 44444444444 </a> </LI> <br/> <li> <a href = "#"> 44444444444 </a> </LI> <br/> <li> <a href = "# "> 44444444444 </a> </LI> <br/> <li> <a href =" # "> 44444444444 </a> </LI> <br/> <<a href = "#"> 44444444444 </a> </LI> <br/> <li> <Href = "#"> 44444444444 </a> </LI> <br/> <li> <a href = "#"> 44444444444 </a> </LI> <br/> <li> <a href = "#"> 44444444444 </a> </LI> <br/> <li> <a href = "#"> 44444444444 </A> </LI> <br/> <li> <a href = "#"> 44444444444 </a> </LI> <br/> <li> <pref = "#"> 44444444444 </a> </LI> <br/> <li> <a href = "#"> 44444444444 </a> </LI> <br/> </ul> <br/> </div> <br/> <ul> <br/> <li> <a href = "#"> 55555555555 </a> </LI> <br/> <li> <a href = "# "> 55555555555 </a> </LI> <br/> <li> <a href =" # "> 55555555555 </a> </LI> <br/> <LI> <a href = "#"> 55555555555 </a> </LI> <br/> <li> <a href = "#"> 55555555555 </a> </LI> <br/> <li> <a href = "#"> 55555555555 </a> </LI> <br/> <li> <a href = "# "> 55555555555 </a> </LI> <br/> <li> <a href =" # "> 55555555555 </a> </LI> <br/> <LI> <a href = "#"> 55555555555 </a> </LI> <br/> <li> <a href = "#"> 55555555555 </a> <<br/> <li> <a href = "#"> 55555555555 </A> </LI> <br/> <li> <a href = "#"> 55555555555 </a> </LI> <br/> </ul> <br/> </div> <br/> </body> </P> <p> <SCRIPT> <br/> <! -- <Br/> var H = document. getelementbyid ("tab "). getelementsbytagname ("H3"); <br/> var d = document. getelementbyid ("tab "). getelementsbytagname ("Div"); <br/> function go_to (AO) {<br/> for (VAR I = 0; I <H. length; I ++) {<br/> If (ao-1 = I) {<br/> d [I]. classname + = "Block"; <br/> H [I]. classname + = "up"; <br/>} else {<br/> H [I]. classname = ""; <br/> d [I]. classname = ""; <br/>}< br/> // --> <br/> </SCRIPT>