Copy codeThe Code is as follows:
<! 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">
<Head>
<Title> tab </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; 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: 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:; 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; border: solid 1px # ccc; color: #666 ;}
# Tab03 div. tab. up {display: block ;}
-->
</Style>
</Head>
<Body>
<Div id = "tab01">
<H3> homepage <Div class = "jj"> <p> Hey, ignore the original class value of the div. </P> </div>
<H3 class = "pr"> test <Div> <p> ignore the original h3 class value. </P> </div>
<H3> bored <Div> <p> h3 has no value ~ </P> </div>
<H3 class = "box"> dumb <Div> <p> the div does not have the same value ~ </P> </div>
</Div>
<Div id = "tab02">
<H4> homepage <Ol class = "pr"> <li> Hey, ignore the original class value of the container. </Li> </ol>
<H4 class = "box"> test <Ol> <li> ignore the original h3 class value. </Li> </ol>
<H4> bored <Ol> <li> h3 has no value ~ </Li> </ol>
<H4 class = "bb"> dumb <Ol> <li> the div does not have the same value ~ </Li> </ol>
</Div>
<Div id = "tab03">
<H3> homepage <Div class = "tab"> <p> Hey, ignore the original h3 class value. </P> </div>
<H3> test <Div class = "tab wushi"> <p> ignore the original div class value. </P> </div>
<H3> bored <Div class = "tab"> <p> h3 has no value ~ </P> </div>
<H3 class = "box"> dumb <Div class = "tab tab123"> <p> similar class values can also be ~ </P> <div> <p> after a class is specified, a div can be added immediately. </P> </div>
</Div>
<Script type = "text/javascript">
<! --
Function Pid (id, tag ){
If (! Tag ){
Return document. getElementById (id );
}
Else {
Return document. getElementById (id). getElementsByTagName (tag );
}
}
Function tab (id, hx, box, iClass, s, pr ){
Var hxs = Pid (id, hx );
Var boxs = Pid (id, box );
If (! IClass) {// if no class is specified, then:
BoxsClass = boxs; // directly use box as a container
}
Else {// if the class is specified, then:
Var boxsClass = [];
For (I = 0; I <boxs. length; I ++ ){
If (boxs [I]. className. match (/\ btab \ B/) {// judge the class matching of the container
BoxsClass. push (boxs [I]);
}
}
}
If (! Pr) {// if the pre-expand container is not specified, then:
Go_to (0); // default expanded Sequence
Yy ();
}
Else {
Go_to (pr );
Yy ();
}
Function yy (){
For (var I = 0; I Hxs [I]. temp = I;
If (! S) {// if no event is specified, then:
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 If (! Hxs [I]. tmpClass ){
Hxs [I]. tmpClass = hxs [I]. className + = "";
BoxsClass [I]. tmpClass = boxsClass [I]. className + = "";
}
If (pr = I ){
Hxs [I]. className + = "up"; // show status: Title
BoxsClass [I]. className + = "up"; // expand status: Container
}
Else {
Hxs [I]. className = hxs [I]. tmpClass;
BoxsClass [I]. className = boxsClass [I]. tmpClass;
}
}
}
}
Tab ("tab01", "h3", "div", "", "onclick", 2); tab ("tab02", "h4", "ol "); tab ("tab03", "h3", "div", "tab ");
// -->
</Script>
</Body>
</Html>