JavaScript Horizontal vertical Standard Tab Effect Code _ Experience Exchange
Last Update:2016-05-16
Source: Internet
Author: User
<! 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" lang= "ZH-CN" xml:lang= "ZH-CN" > <pead> <meta http-equiv= " Content-type "content=" text/html; Charset=utf-8 "/> <meta name=" keywords "content=" prcss,xhtml,html,css,js,book, personal homepage, boredom, nerves, laziness "/> <meta Name= "description" content= "Prcss's homepage, boring, nervous, lazy ..."/> <meta name= "Author" content= "prcss,qq:50198763"/ > <meta name= "Copyright" content= "This page is owned by PRCSS. All rights Reserved "/> <title>prcss tabs www.jb51.net</title> <style type=" Text/css "> <!--* {MA rgin:0; padding:0; font-size:12px; Font-weight:normal; }. JJ {font-weight:bolder!important;}. Box {border-top-color: #c00!important;}. PR {color: #060!important;} #tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; Overflow:hidden; } #tab01 h3 {position:relative; z-index:2; float:left; height:14px padding:0 7px 0 8px; margin-left:-1px; Border-left:solid 1px #ccc; Border-right:solid 1px #fff; Text-align:center; Background: #fff; Cursor:pointer; } #tab01 h3.up {height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:# C00; } #tab01 div {display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border : solid 1px #ccc; Color: #666; } #tab01 div.up {display:block;} #tab02 {position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; } #tab02 h4 {height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center ; Background: #f6f6f6; Cursor:pointer; } #tab02 h4.up {color: #c00;} #tab02 ol {display:none; height:54px; padding:5px; color: #666;} #tab02 ol.up {DISPLAY:BL Ock; } #tab03 {position:relative; width:100px; margin:50px;} #tab03 h3 {position:relative; z-index:1; height:16px; padding-t op:4px; margin-bottom:-1px; BoRder:solid #ccc; border-width:1px 0 1px 1px; Text-align:center; Font-family: Song body; Background: #eee; Cursor:pointer; } #tab03 h3.up {z-index:3; color: #c00; background: #fff;} #tab03 div.tab {display:none; position:absolute; left:99px; to p:0; Z-index:2; width:300px; height:200px; padding:5px; Border:solid 1px #ccc; Color: #666; } #tab03 div.tab.up {display:block;}-</style> </pead> <body> <p> Home </p> <p> hehe, ignoring the original class value of Div. </p> <p class= "PR" > Test </p> <p> Continue ignoring H3 original class value. </p> <p> Boredom </p> <p>h3 No value can also ~</p> <p class= "box" > The Silly Egg </p> <p>div No value can ~</p> <p> home </p> <ol class= "PR" ><li> hehe, ignoring the original class value of the container. </li></ol> <p class= "box" > Test </p> <ol><li> Continue ignoring H3 original class value. </li></ol> <p> Boredom </p> <ol><li>h3 no value or ~</li></ol> <p class= "BB" > Silly egg </p> <ol><li>div no value can ~</li></ol> <p> Home </p> <p> Hey, ignore H3 original class value. </p> <p> Test </p> <p> Continue ignoring div original class values. </p> <p> Boredom </p> <p>h3 No value can also ~</p> <p class= "box" > The Silly Egg </p> The <p>class value is similar to the same can be ~</p><p> the specified class, the instant one more Div also line. </p> </body> </ptml>
