Ie5.0 + firefox chrome, a simple class. Save and run it! For usage instructions, see code comments ~
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Tab Demo-by funnyzak </title>
<Style type = "text/css">
Ul, li {margin: 0; padding: 0 ;}
Body {text-align: center; padding: 0; margin: 0 ;}
# Tabcontainer {width: 700px; height: auto; margin: 30px auto 0; border: solid 1px # CCC ;}
# Title_c {width: 100%; border-bottom: # CCC 1px solid; overflow: hidden ;}
# Title_c ul {list-style: none ;}
# Title_c li, # title_c. li_on {height: 25px; line-height: 25px; float: left; width: 70px; padding: 0 15px; text-align: center; font-size: 13px; cursor: pointer; font-weight: bold ;}
# Title_c. li_on {color: # F00 ;}
# Tabcontent {width: 680px; padding: 10px; margin: 0; overflow: hidden; text-align: left ;}
</Style>
</Head>
<Body>
<Div id = "tabcontainer">
<H3> Write By FunnyZAk <Div id = "title_c">
<Ul>
<Li> I am TAB1 </li>
<Li> I am TAB2 </li>
<Li> I am TAB3 </li>
<Li> I am TAB4 </li>
<Li> I am TAB5 </li>
<Li> I am TAB6 </li>
<Li> I am TAB7 </li>
</Ul>
</Div>
<Div id = "tabcontent">
<Div> content 1sdf, a brand new cooperation model. For us
</Div>
<Div> content 2: The Taopu straw store creates a brand new program to collect local doctors. This is a brand new cooperation model. For us
</Div>
<Div> the content is to pass the doctor, which is a brand new cooperation model. For us
</Div>
<Div> content 4 Play for us
</Div>
<Div> content 5: The taipu straw store creates a brand new collection plan, which is a Volvo. For us
</Div>
<Div> content 6 Taopu straw fun favorites program, which is a brand new cooperation model. For us
</Div>
<Div> content 7 is a brand new cooperation model. For us
</Div>
</Div>
</Div>
</Body>
<SCRIPT type = "text/JavaScript">
/* The tab tool by funny Zak <silenceacegmail.com> 2008-12-21
* Call example: New zaktabtool ("title_c", "tabcontent", "li_on", 3 );
* 1st the parameter is the second name of the button container, the third name of the content container, and the class name of the button when the content changes.
* The fourth parameter is the default number of displayed content. This parameter cannot be greater than the number of buttons, starting from 1 */
Function zaktabtool ()
{
VaR OBJ = this;
This. tabbuttons = Document. getelementbyid (arguments [0]);
This. tabcontents = Document. getelementbyid (arguments [1]);
This. tabonclass = arguments [2];
VaR TOC = This. tabonclass;
This. starttab = arguments [3];
VaR tabcontentlist = This. tabcontents. getelementsbytagname ("Div ");
VaR tabbuttonlist = This. tabbuttons. getelementsbytagname ("Li ");
This. Rc = function (){
For (VAR I = 0; I <tabcontentlist. length; I ++) {tabcontentlist [I]. style. Display = "NONE ";}
For (VAR I = 0; I <tabbuttonlist. length; I ++) {tabbuttonlist [I]. classname = "";}
}
This. Register = function (){
For (VAR I = 0; I <tabbuttonlist. length; I ++)
{
Tabbuttonlist [I]. Index = I;
Tabbuttonlist [I]. onmouseover = function (){
OBJ. RC ();
This. classname = toc;
Tabcontentlist [This. Index]. style. Display = "Block ";
}
}
}
This. init = function (){
If (tabcontentlist. length! = Tabbuttonlist. Length) {alert ("initialization failed! Check element settings! "); Return false ;}
OBJ. RC ();
If (this. starttab = 0) {This. starttab = 1 ;}
Tabbuttonlist [This. starttab-1]. classname = This. tabonclass;
Tabcontentlist [This. starttab-1]. style. Display = "Block ";
OBJ. Register ();
}
OBJ. INIT ();
}
New zaktabtool ("title_c", "tabcontent", "li_on", 3 );
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
