<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> using CSS + JavaScript to create tabs on a webpage </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "Purple endurer">
<Meta name = "keywords" content = "CSS, JavaScript, webpage creation, tab">
<Meta name = "Description" content = "using CSS + JavaScript to create a web page tab">
<Style>
# Tabmenu
{
Color: #000;
Border-bottom: 1px solid # ff7e00;
Margin: 5px 0px 0px 0px;
Padding: 0px;
Z-index: 1;
Padding-left: 10px;
}
# Tabmenu Li
{
Display: inline;
Overflow: hidden;
List-style-type: none;
Margin: 5px;
}
# Tabmenu A, A. Active
{
Color: #000;
Background: # FFF;
Border: 1px solid # ff7e00;
Padding: 2px 5px 0px 5px;
Margin: 0;
Text-Decoration: none;
}
# Tabmenu A. Active
{
Background: # fff4d4;
Border-bottom: 3px solid # fff4d4;
}
# Tabmenu A: hover
{
Background: # fff4d4;
}
# Tabmenu A. Active: hover
{
Background: # fff4d4;
Color: #000;
}
. Activecontent
{
Text-align: justify;
Background: # fff4d4;
Padding: 2px;
Border: 1px solid # ff7e00;
Border-top: none;
Z-index: 2;
}
. Activecontent
{
Text-Decoration: none;
Color: # 00f;
}
. Activecontent A: hover
{
Text-Decoration: underline;
}
. Activecontent ol
{
Margin: 5px 5px 5px 25px! Important;
Margin: 5px 5px 5px 30px;
Padding: 0px;
}
. Activecontent Li
{
Margin: 0px;
Padding: 0px;
}
. Hiddencontent
{
Display: none;
}
</Style>
</Head>
<Body>
<Script language = "JavaScript">
<! --
VaR tabarray = new array ();
Tabarray [0] = new array ("endurer @ blogchina", "http://endurer.blogchina.com ");
Tabarray [1] = new array ("endurer @ blogcn", "http://endurer.blogcn.com ");
Tabarray [2] = new array ("endurer @ xoyo", "http://blog.xoyo.com/endurer ");
Tabarray [3] = new array ("endurer @ $ inablog", "http://blog.sina.com.cn/u/1234333073 ");
G_tabcount = tabarray. length;
/* Writetab (), writecontents (), and seltab (). The content of each tab is independent of one <IFRAME> */
Function writetab (tabindex)
{
If (0 = g_tabcount)
{
Document. Write ('null ');
Return;
}
If (tabindex> = g_tabcount)
{
Tabindex = g_tabCount-1;
}
Document. Write ('<ul id = "tabmenu"> ');
For (I = 0; I <g_tabcount; I ++)
{
Document. Write ('<li> <a id = "tabtab ');
Document. Write (I );
Document. Write ('"onclick =" seltab (');
Document. Write (I );
Document. Write ('); Return false; "class = "');
Document. Write (I = tabindex? "Active ":"");
Document. Write ('"href =" # "> ');
Document. Write (tabarray [I] [0]);
Document. Write ('</a> </LI> ');
}
Document. Write ("</ul> ");
}
Function writecontents (tabindex, height)
{
If (0 = g_tabcount)
{
Document. Write ('null ');
Return;
}
If (tabindex> = g_tabcount)
{
Tabindex = g_tabCount-1;
}
For (I = 0; I <g_tabcount; I ++)
{
Document. Write ('<Div id = "tabcontent ');
Document. Write (I );
Document. Write ('"class = "');
Document. Write (I = tabindex? "Active": "hiddencontent ");
Document. Write ('"> ');
Document. Write ('<IFRAME src = "');
Document. Write (tabarray [I] [1]);
Document. Write ('"width =" 100% "Height = "');
Document. Write (height );
Document. write ('"style =" border-left: 1 solid # ff7e00; border-Right: 1 solid # ff7e00; border-bottom: 1 solid # ff7e00 "> </iframe> ');
Document. Write ("</div> ");
}
}
Function seltab (tabindex)
{
For (I = 0; I <g_tabcount; I ++)
{
Tab = Document. getelementbyid ("tabtab" + I );
Content = Document. getelementbyid ("tabcontent" + I );
If (I = tabindex)
{
Tab. classname = "active ";
Content. classname = "activecontent ";
}
Else
{
Tab. classname = "";
Content. classname = "hiddencontent ";
}
}
}
/* Writetab1 (), writecontents1 (), seltab1 (), and each tab share one <IFRAME> */
Function writetab1 (tabindex)
{
If (0 = g_tabcount)
{
Document. Write ('null ');
Return;
}
If (tabindex> = g_tabcount)
{
Tabindex = g_tabCount-1;
}
Document. Write ('<ul id = "tabmenu"> ');
For (I = 0; I <g_tabcount; I ++)
{
Document. Write ('<li> <a id = "tabtab ');
Document. Write (I );
Document. Write ('"onclick =" seltab1 (');
Document. Write (I );
Document. Write ('); Return false; "class = "');
Document. Write (I = tabindex? "Active ":"");
Document. Write ('"href =" # "> ');
Document. Write (tabarray [I] [0]);
Document. Write ('</a> </LI> ');
}
Document. Write ("</ul> ");
}
Function writecontents1 (tabindex, height)
{
If (0 = g_tabcount)
{
Document. Write ('null ');
Return;
}
If (tabindex> = g_tabcount)
{
Tabindex = g_tabCount-1;
}
VaR strhtml = '<IFRAME src = "';
Strhtml + = tabarray [tabindex] [1];
Strhtml + = '"width =" 100% "Height = "';
Strhtml + = height;
Strhtml + = '"style =" border-left: 1 solid # ff7e00; border-Right: 1 solid # ff7e00; border-bottom: 1 solid # ff7e00 "> </iframe> ';
Document. All ("idtabcontent"). innerhtml = strhtml;
}
Function seltab1 (tabindex)
{
For (I = 0; I <g_tabcount; I ++)
{
Tab = Document. getelementbyid ("tabtab" + I );
Tab. classname = (I = tabindex? "Active ":"");
}
Writecontents1 (tabindex );
}
// Writetab (0 );
// Writecontents (0 );
Writetab1 (0 );
// -->
</SCRIPT>
<Div id = "idtabcontent"> </div>
<Script language = "JavaScript">
<! --
Writecontents1 (0,300 );
// -->
</SCRIPT>
</Div>
</Body>
</Html>