<! 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 nam E= "description" content= "Prcss's personal homepage, boring, nervous, lazy ..."/> <meta name= "Author" content= "prcss,qq:50198763"/> &L T;meta name= "Copyright" content= "This page belongs to prcss all. All Rights Reserved "/> <title>prcss tabs www.jb51.net</title> <style type=" Text/css "> <!-- * {margin: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; bord Er: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:cente R Background: #f6f6f6; Cursor:pointer; } #tab02 h4.up {color: #c00;} #tab02 ol {display:none; height:54px; padding:5px; color: #666;} #tab02 ol.up {Display:block} #tab03 {position:relative; width:100px; margin:50px;} #tab03 h3 {position:relative; z-inDex:1; height:16px; padding-top: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; top:0; z-index:2; width:300px; height:200px; padding:5px; bo Rder:solid 1px #ccc; Color: #666; } #tab03 div.tab.up {display:block} --> </style> </pead> <body> <div id= "tab01" > <p> home </p> &L T;div class= "JJ" ><p> Hey, ignore div original class value. </p></div> <p class= "PR" > Testing </p> <div><p> continues to disregard H3 original class values. </p></div> <p> Boredom </p> <div><p>h3 No value can ~</p></div> & Lt;h3 class= "box" > Silly egg </p> <div><p>div No value can be ~</p></div> </div> < Div id= "tab02" > <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> continues to disregard H3 original class values. </li></ol> <p> Boredom </p> <ol><li>h3 No value can ~</li></ol> & Lt;h4 class= "BB" > Silly egg </p> <ol><li>div No value can be ~</li></ol> </div> <d IV id= "TAB03" > <p> home </p> <div class= "tab" ><p> hehe, ignoring the H3 original class value. </p></div> <p> testing </p> <div class= "tab Wushi" ><p> continues to disregard the div original class value. </p></div> <p> boredom </p> <div class= "tab" ><P>H3 no value can be ~</p></div > <p class= "box" > Silly egg </p> <div class= "tab tab123" ><p>class values are similar to ~</P>&L T;div><p> Specify class, immediately more than one Div also line. </p></div></div> </div> <script type= "Text/javasCript "> <!--function Pid (id,tag) {if (!tag) {return document.getElementById (ID); else{return document.getElementById (ID). getElementsByTagName (tag); }//tab-[id],[hx= header],[box= container tag],[iclass= container style],[s= event],[pr= sequence] function tab (ID,HX,BOX,ICLASS,S,PR) {var hxs =pid (ID,HX); var boxs=pid (Id,box); if (!iclass) {//If class is not specified: Boxsclass=boxs///Directly using box as container} else{//If class is specified: Var b Oxsclass = []; for (i=0;i<boxs.length;i++) {if (Boxs[i].classname.match (/\btab\b/)) {//To determine if the container's class matches Bo Xsclass.push (Boxs[i]); }} if (!PR) {//If no pre-expansion container is specified: go_to (0);//default unwind sequence yy (); else {go_to (PR); YY (); function yy () {for (Var i=0;i<pxs.length;i++) {hxs[i].temp=i; if (!s) {//If no event is specified: S= "onmouseover"; Use the default event Hxs[i][s]=function () {go_to (this.temp); } else{hxs[i][s]=function () {go_to (this.temp); function go_to (pr) {for (Var i=0;i<pxs.length;i++) { if (!hxs[i].tmpclass) {hxs[i].tmpclass=hxs[i].classname+= "pr1984_com"; boxsclass[i].tmpclass=boxsclass[i].classname+= "pr1984_com"; } if (pr==i) {hxs[i].classname+= "up";//Expand Status: Title Boxsclass[i].classname+ = "Up"; Expand state: Container} else {hxs[i].classname=hxs[i].tmpclass; Boxsclass[i].classname=boxsclass[i].tmpclass; }}} tab ("Tab01", "H3", "div", "", "onclick", 2); Use div for container, specify event, specify sequence. tab ("Tab02", "H4", "Ol"); Use OL for capacityDevice, default event, default sequence. tab ("Tab03", "H3", "div", "tab"); Use Div.tab as container, default event, default sequence. --> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
