<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "<a href =" http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd "target =" _ blank "> http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd </a>">
<HTML xmlns = "<a href =" http://www.w3.org/1999/xhtml "target =" _ blank "> http://www.w3.org/1999/xhtml </a>">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Meta name = "keywords" content = ""/>
<Title> tab demo </title>
<SCRIPT type = "text/JavaScript">
<! --
Function C (I ){
VaR I;
Document. getelementbyid ("tab"). classname = "TABD" + I;
Window. Name = I; // window. Name
}
Onload = function (){
VaR A = Document. links;
For (VAR I = 0; I <A. length; I ++) A [I]. onfocus = function () {This. Blur ();}
}
// -->
</SCRIPT>
<Style type = "text/CSS">
Body, table, TD, Th, input, textarea, button, select {Font: 13px verdana, "", sans-serif ;}
Body {background-color: # Eef ;}
Div # tab {width: 300px; text-align: Left ;}
Ul. Tabu {
List-style: none;
Margin: 0px;
Padding: 1px 0px 0px. 5em;
}
Ul. Tabu Li {
Display: inline;
Margin-Right: 2px;
}
Ul. Tabu Li {
Color: black;
Font-weight: bold;
Line-Height: 20px;
Text-Decoration: none;
Background-image: URL (Attachments/month_0704/p200743202029.gif );
Border: 1px # bbbbbb solid;
Border-bottom-width: 0px;
Padding: 0px 5px 2px;
Cursor: pointer;
}
Div. tabc {
Display: none;
Border: 1px solid;
Padding: 6px;
}
Div. tabd1 A. tabb1, A. tabb1: hover {background-position: 0-20px; border-color: # eaad6b ;}
Div. tabd1 Div. tabc1 {border-color: # eaad6b; display: block; Background-color: # fdedd8 ;}
Div. tabd2 A. tabb2, A. tabb2: hover {background-position: 0-42px; border-color: #6ecef3 ;}
Div. tabd2 Div. tabc2 {border-color: #6ecef3; display: block; Background-color: # e6f6fd ;}
Div. tabd3 A. tabb3, A. tabb3: hover {background-position: 0-64px; border-color: #84ac44 ;}
Div. tabd3 Div. tabc3 {border-color: #84ac44; display: block; Background-color: # f1f6e7 ;}
Div. tabd4 A. tabb4, A. tabb4: hover {background-position: 0-86px; border-color: # f37a3 ;}
Div. tabd4 Div. tabc4 {border-color: # f37a3; display: block; Background-color: # ffeef4 ;}
Div. tabd1 A. tabb1, Div. tabd2 A. tabb2, Div. tabd3 A. tabb3, Div. tabd4 A. tabb4 {padding: 1px 5px 3px ;}
</Style>
</Head>
<Body>
<Center>
<Div id = "tab" class = "tabd1">
<SCRIPT type = "text/JavaScript">
<! --
// Var I = parseint (location. Hash. Replace ("#", ""); // hash
VaR I = parseint (window. Name); // window. Name
If (I) document. getelementbyid ("tab"). classname = "TABD" + I;
// -->
</SCRIPT>
<Ul class = "Tabu">
<Li> <a onclick = "C (1) "href =" #1 "class =" tabb1 "> tab1 </a> </LI> <li> <a onclick =" C (2) "href =" #2 "class =" tabb2 "> tab2 </a> </LI> <li> <a onclick =" C (3) "href =" #3 "class =" tabb3 "> tab3 </a> </LI> <li> <a onclick =" C (4) "href =" #4 "class =" tabb4 "> tab4 </a> </LI>
</Ul>
<Div class = "tabc tabc1"> <B> tab demo </B> ver1.2 (window. Name)
Created by forfor 2006-09-12 </div>
<Div class = "tabc tabc2"> <input value = "hello"/> </div>
<Div class = "tabc tabc3"> <center> http://www.google.com/intl/en/images/logo.gif </> "/> </center> </div>
<Div class = "tabc tabc4"> ver1.0 2005-09-09
Ver1.1
Ver1.2 2006-09-12
<A href = "javascript: void (C (0);">... </a> </div>
</Div>
</Center>
</Body>
</Html>