<!--to retain the original author when quoting, respect any original author, promote Chinese Internet process Editor:weasle email:weasle@163.com qq:112011531--> <ptml xmlns= "htt P://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html;charset=gb2312 " > <title> Concise tab</title> <style type= "Text/css" > <!--body,div,ul,li{padding:0; Text-align:center; body{font:12px "Song Body"; Text-align:center; a:link{color: #00F; Text-decoration:none; } a:visited {color: #00F; Text-decoration:none; } a:hover {color: #c00; Text-decoration:underline; } ul{List-style:none;} /* Tab 1*/#Tab1 {width:460px; margin:0px; padding:0px; margin:0 Auto;} /* Tab 2*/#Tab2 {width:576px; margin:0px; padding:0px; margin:0 Auto;} /* Menu class*/. Menubox {width:100%; Background:url (yun_qi_img/20079299441652.gif); height:28px; line-height:28px; } . Menubox ul{margin:0px; padding:0px; } . Menubox li{Float:left; Display:block; Cursor:pointer; width:114px; Text-align: Center; Color: #949694; Font-weight:bold; } . Menubox li.hover{padding:0px; Background: #fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; Background:url (yun_qi_img/200792994426548.gif); Color: #739242; Font-weight:bold; height:27px; line-height:27px; } . contentbox{Clear:both; margin-top:0px; border:1px solid #A8C29F; Border-top:none; height:181px; Text-align:center; padding-top:8px; --> </style> <script> <!--/* The first form of the second form replace the display style/function Settab (name,cursel,n) {for (i=1;i< =n;i++) {var menu=document.getelementbyid (name+i); var Con=document.getelementbyid ("Con_" +name+ "_" +i); Menu.classname=i==cursel? " Hover ":" "; Con.style.display=i==cursel? " Block ": none"; }//--> </script> </pead> <body> <div id= "TAB1" > <div class= "Menubox" > < ul> <li id= "One1 onclick=" Settab (' one ', 1,4) "class=" hover "> news 1</li> <li ID= "One2" onclick= "Settab (' one ', 2,4)" > News 2</li> <li id= "One3" onclick= "Settab (' one ', 3,4)" > News 3</li > <li id= "one4" onclick= "Settab (' one ', 4,4)" > News 4</li> </ul> </div> <div class= "Contentbo X "> <div id=" con_one_1 "class=" hover "> News listing 1</div> <div id=" con_one_2 "> News list 2</div> Id= "Con_one_3" > News listings 3</div> <div id= "Con_one_4" > News listings 4</div> </div> </div> <div Id= "TAB2" > <div class= "Menubox" > <ul> <li id= "two1" onclick= "Settab (' two ', 1,4)" class= "hover" > news 1</li> <li id= "Two2 onclick=" Settab (' two ', 2,4) "> News 2</li> <li id=" Two3 "onclick=" Settab (' two '), 3,4) "> News 3</li> <li id=" Two4 "onclick=" Settab (' two ', 4,4) "> News 4</li> </ul> </div> < Div class= "Contentbox" > <div id= "con_two_1" > News list 1</div> <div id= "con_two_2" > News list 2</div> & Lt;div id= "Con_two_3" > News list 3</div> <div id= "Con_two_4" > News list 4</div> </div> </div> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
