<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title>tab-flying +pr</title> <style type=" Text/css "media=" All ">/*tab layout * * * #tab * {font-size:12px;} #tab H3 a {display:inline-block;} #tab H3 a {display:block;} #tab {position:relative;} #tab H3, #tab ul, #tab Div, #tab li {margin:0;padding:0;list-style-type:none;} #tab ul li {position:absolute;left:0;top:0;float:left;display:block;width:100px;height:30px;font-size:0;} #tab ul li#tab2 {left:100px;} #tab ul li#tab3 {left:200px;} #tab ul li#tab4 {left:300px;} #tab ul Li Div {position:absolute;clear:both;} #tab ul Li div#odiv2 {left:-100px;} #tab ul Li Div#odiv3 {left:-200px;} #tab ul Li div#odiv4 {left:-300px;} /*tab-title Modifier * * #tab, #tab ul Li Div, #tab ul Li div li {width:450px;} /* Set the total width of [width] */#tab{height:200px;background: #ccc; overflow:hidden;} /* Set total height [height], title background color [background] * * #tab ul Li H3 a {height:18px;padding:5px 0 2px;margin:5px 0px 0px 5px;text-align:c Enter;border:solid #ccc 1px;border-bottom:none;color: #333;} /* Title Default state * * #tab ul li h3 a:hover {background-color: #ddd; Border-color: #fff;} * * Mouse through State/#tab ul Li.up h3 a {background: #999; Border-color: #fff #999 #999 #fff; color: #fff;} /* Current Window status * * #tab ul li Div {border:solid #999; border-width:1px 0;background: #f7f7f7; height:167px;} /* Set content height [height], background color [background], up and down split line [border] * * */*TAB1 effect [ol/li]*/#tab ul li #oDIV1 ol {margin:8px;padding:0;} #tab ul Li #oDIV1 ol li {position:static;float:none;font-size:0;height:auto;} #tab ul Li #oDIV1 ol li a {font-size:12px;display:block;padding:5px 0 1px;} /*TAB2 effect [img]*/#tab ul li #oDIV2 img {margin:8px;border:none;} /*TAB3 effect [iframe]*/#tab ul Li #oDIV3 iframe {border:none;width:440px;height:157px;margin:5px;} </style> <script type= "Text/javascript" > <!--Function Toggleto (img) {var ts=document.getelementbyid ("tab"). getElementsByTagName ("div"); for (i=1;i<ts.length+1;i++) {if (img==i) {document.getElementById ("Odiv" +i). Style.display = ""; document.getElementById ("Odiv" +i). parentnode.classname+= "Up"; } else{document.getElementById ("Odiv" +i). Style.display = "None"; document.getElementById ("Odiv" +i). Parentnode.classname= "tab" +I; }}--> </script> </pead> <body> <div id= "tab" > <ul> <li id= "Tab1" Clas s= "Up" ><p> pay </p> <!--onclick mouse release, onmousemove mouse over. --> <div id= "oDIV1" > <ol> <li><span> to get the element to be highly visible under Firefox to display the background </span></li> ;li><span> to ensure browser compatibility </span></li> <li><span> text alignment back to default left</span></li > <li><span> Adaptive [Firefox center]</span></li> <li><span> content alignment is centered [ie centered] </span></li> <li><span> content alignment is centered [IE Center mode]</span></li> </ol> </div> </li> <li id= "tab2" ><p> software download </p> <div id= "oDIV2" > </div> </li> <li id= "tab3" ><p> problem FAQ </p> <div id= "O DIV3 "><iframe frameborder=" 0 "scrolling=" Auto "src=" http://pr.idcx.com "></iframe></div> </ li> <li id= "TAB4" ><p> customer service </p> <div id= "oDIV4" >22222</div> </li> </ul> ; </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
