< Style>

. None {display: none; } The block {display: block; }

. S_c {width: 800 px; The text - align: center; } . S_c ul {clear: both; Margin: 0; } . S_c li {list - style: none; Float: left; Position: relative; Width: 70 px; } / * * / . C_0 {background - color: # CCCCCC; } The c_1 {background - color: # 0000 cc; } / * * / The s_b { Border: 1 px solid # 666; Height: 160 px; Width: 440 px; }

/ * * /

< / style> < Script language = “javascript” > The function of aa (s_id) { For (I = 1; I< 7. I++) {     If (I = = s_id) {       Document. The getElementById (” s ”+ I). The className =” block ”; // style of content       Document. The getElementById (” m ”+ I). The className =” c_ + I + “c_1”;” // head style       / / the document. The getElementById (” uid_ ”+ I). The focus ();     }     The else     {       Document. The getElementById (” s ”+ I). The className =” none ”; // the content is not displayed       Document. The getElementById (” m ”+ I). The className =” c_0 ”; //     } } } < / script>

< Div > < Ul> < Li> < Div id = “m1” > < A href = ”#” onmouseover = “aa (1)” > A classification < / a> < / div> < / li> < Li> < Div id = “m2” > < A href = ”#” onmouseover = “aa (2)” > Category 2 < / a> < / div> < / li> < Li> < Div id = “m3” > < A href = ”#” onmouseover = “aa (3)” > Classification of three < / a> < / div> < / li> < Li> < Div id = “m4 >” < A href = ”#” onmouseover = “aa (4)” > Classification of four < / a> < / div> < / li> < Li> < Div id = “m5” > < A href = ”#” onmouseover = “aa (5)” > Classification of five < / a> < / div> < / li> < Li> < Div id = “m6” > < A href = ”#” onmouseover = “aa (6)” > Classification of six < / a> < / div> < / li> < / ul> < / div>

< Div >

< Div id = “s1” > < Div> Part I < / div> < / div> < Div id = “s2” > < Div > Part two < / div> < / div> < Div id = “s3” > < Div > Part iii < / div> < / div> < Div id = “s4” > < Div > Part iv < / div> < / div> < Div id = “s5 >” < Div > Part v < / div> < / div> < Div id = “s6” > < Div > Part 6 < / div> < / div>

< / div>