<! 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 = gb2312"/>
<Title> webpage layer switching result _ tab effect overview </title>
<Style>
* {Margin: 0; padding: 0 ;}
Body {margin: 50px; font-size: 12px; color: #666 ;}
Li {list-style: none ;}
Div {width: 210px ;}
. Tab1 ,. tab2 {width: 398px; Height: 34px; Border: 1px # cfedff solid; border-bottom: 0; Background: URL (/jzxy/uploadfiles_333/201008/20100817155557621 .gif) repeat-X ;}
. Tab1 ul,. tab2 ul {margin: 0; padding: 0 ;}
. Tab1 Li ,. tab2 Li {float: Left; padding: 0 30px; Height: 34px; line-Height: 34px; text-align: center; border-Right: 1px # ebf7ff solid; cursor: pointer ;}
. Tab1 Li. Now,. tab2 Li. Now {color: #5299c4; Background: # FFF; font-weight: bold ;}
. Tablist {width: pixel PX; Height: 100px; padding: 10px; font-size: 14px; line-Height: 24px; Border: 1px # cfedff solid; border-top: 0; display: none ;}
. Block {display: block ;}
. Red {color: # bd0a01 ;}
Fieldset {width: pixel PX; Border: 1px # b0c0d1 solid; padding: 10px ;}
Legend {Background: # b0c0d1; padding: 4px 10px; color: # FFF ;}
# C {margin-top: 10px ;}
. C1,. C2 {width: pixel PX; line-Height: 20px ;}
. C1 {color: #014cc9 ;}
. C2 {color: #7e6095; display: none ;}
H3 {font-size: 16px; padding: 5px 0 ;}
</Style>
<SCRIPT type = "text/JavaScript">
Function tab (O, S, CB, Ev) {// tab switch class
VaR $ = function (o) {return document. getelementbyid (o )};
VaR CSS = O. Split (S | '_'));
If (CSS. length! = 4) return;
This. event = EV | 'onclick ';
O = $ (O );
If (o ){
This. Item = [];
O. ID = CSS [0];
VaR item = O. getelementsbytagname (CSS [1]);
VaR j = 1;
For (VAR I = 0; I <item. length; I ++ ){
If (item [I]. classname. indexof (CSS [2])> = 0 | item [I]. classname. indexof (CSS [3])> = 0 ){
If (item [I]. classname = CSS [2]) O ['cur'] = item [I];
Item [I]. Callback = CB | function (){};
Item [I] ['css '] = CSS;
Item [I] ['link'] = O;
This. item [J] = item [I];
Item [I] ['index'] = J ++;
Item [I] [This. event] = This. Active;
}
}
Return O;
}
}
Tab. Prototype = {
Active: function (){
VaR $ = function (o) {return document. getelementbyid (o )};
This ['link'] ['cur']. classname = This ['css '] [3];
This. classname = This ['css '] [2];
Try {
$ (This ['link'] ['id'] + '_' + this ['link'] ['cur'] ['index']). style. display = 'none ';
$ (This ['link'] ['id'] + '_' + this ['index']). style. Display = 'block ';
} Catch (e ){}
This. Callback. Call (this );
This ['link'] ['cur'] = this;
}
}
</SCRIPT>
</Head>
<Body>
<H1> move the mouse <strong> <font color = "# ff0000"> switch </font> </strong> label example <Div class = "tab1">
<Ul id = "testpolicli_now _">
<Li class = "now"> Confucianism </LI>
<Li> legalist </LI>
<Li> Mo Jia </LI>
<Li> Taoism </LI>
</Ul>
</Div>
<Div>
<Div id = "test1_1" class = "tablist block">
<Span> Confucianism, represented by Kong Qiu and Meng Yu, represents spring and autumn, the Analects of Confucius, and Mencius. </Span>
</Div>
<Div id = "test1_2" class = "tablist">
<Span> the legalist represents Han Fei, Li Si, Guan Zhong, and Shang Yang, and represents Han Feizi and Guan. </Span>
</Div>
<Div id = "test1_3" class = "tablist">
<Span> mojia, represented by Mozi, represents Mozi. </Span>
</Div>
<Div id = "test1_4" class = "tablist">
<Span> Taoism, represented by Li Er and Zhuang Zhou, represents Lao Tzu and Chuang Tzu. </Span>
</Div>
</Div>
<Br/>
<H1> An example of the <strong> <font color = "# ff0000"> switch </font> </strong> label when you click <Div class = "tab2">
<Ul id = "test2_li_now _">
<Li class = "now"> yin and yang </LI>
<Li> miscellaneous </LI>
<Li> military </LI>
<Li> ranheng </LI>
</Ul>
</Div>
<Div>
<Div id = "test2_1" class = "tablist block">
<Span> Yin and Yang family, zou yan, the representative character, represents Zou Zi. </Span>
</Div>
<Div id = "test2_2" class = "tablist">
<Span> A miscellaneous, represented by Lu Buwei, represents Lu's spring and autumn. </Span>
</Div>
<Div id = "test2_3" class = "tablist">
<Span> the military representative, Sun Wu and Sun Yu, are the representatives of Sun Tzu and Sun Yi. </Span>
</Div>
<Div id = "test2_4" class = "tablist">
<Span> on behalf of SU Qin and Zhang Yi, This is the masterpiece of the Warring States Period. </Span>
</Div>
</Div>
<Br/>
<H1> example of triggering a function when a function is clicked <Div class = "tab2">
<Ul id = "test3_li_now _">
<Li class = "now"> yin and yang </LI>
<Li> miscellaneous </LI>
<Li> military </LI>
<Li> ranheng </LI>
</Ul>
</Div>
<Div>
<Div id = "test3_1" class = "tablist block">
<Span> Yin and Yang family, zou yan, the representative character, represents Zou Zi. </Span>
</Div>
<Div id = "test3_2" class = "tablist">
<Span> A miscellaneous, represented by Lu Buwei, represents Lu's spring and autumn. </Span>
</Div>
<Div id = "test3_3" class = "tablist">
<Span> the military representative, Sun Wu and Sun Yu, are the representatives of Sun Tzu and Sun Yi. </Span>
</Div>
<Div id = "test3_4" class = "tablist">
<Span> on behalf of SU Qin and Zhang Yi, This is the masterpiece of the Warring States Period. </Span>
</Div>
</Div>
<Form name = "ck">
<Fieldset id = "test4-input-input_tab1-input_tab2">
<Legend> I'm radio </legend>
<H3> select the content you want to learn: <Input class = "input_tab1" name = "myradio" id = "R1" type = "radio" Checked = "checked"/> <label for = "R1" class = "red "> XML tutorial </label>
<Input class = "input_tab2" name = "myradio" id = "R2" type = "radio"/> <label for = "R2" class = "red"> browser script </label>
<Div id = "C">
<Div class = "C1" id = "test4_1">
<Input name = "C2" type = "checkbox" id = "XML" value = ""/> <label for = "XML"> XML </label>
<Input name = "C2" id = "DTD" type = "checkbox" value = ""/> <label for = "DTD"> DTD </label>
<Input name = "C2" id = "xmldom" type = "checkbox" value = ""/> <label for = "xmldom"> xml dom </label>
<Input name = "C2" id = "XSL" type = "checkbox" value = ""/> <label for = "XSL"> XSL </label>
<Input name = "C2" id = "XSLT" type = "checkbox" value = ""/> <label for = "XSLT"> XSLT </label>
<Input name = "C2" id = "effecfo" type = "checkbox" value = ""/> <label for = "effecfo"> XSL-FO </label>
<Input name = "C2" id = "XPath" type = "checkbox" value = ""/> <label for = "XPath"> XPath </label>
<Input name = "C2" id = "XQuery" type = "checkbox" value = ""/> <label for = "XQuery"> XQuery </label>
<Input name = "C2" id = "xlink" type = "checkbox" value = ""/> <label for = "xlink"> xlink </label>
<Input name = "C2" id = "xpointer" type = "checkbox" value = ""/> <label for = "xpointer"> xpointer </label>
</Div>
<Div class = "C2" id = "test4_2">
<Input name = "C3" id = "JS" type = "checkbox" value = ""/> <label for = "JS"> JavaScript </label>
<Input name = "C3" id = "HD" type = "checkbox" value = ""/> <label for = "HD"> HTML Dom </label>
<Input name = "C3" id = "DHTML" type = "checkbox" value = ""/> <label for = "DHTML"> DHTML </label>
<Input name = "C3" id = "vbs" type = "checkbox" value = ""/> <label for = "vbs"> VBScript </label>
<Input name = "C3" id = "ajax" type = "checkbox" value = ""/> <label for = "ajax"> Ajax </label>
<Input name = "C3" id = "E4X" type = "checkbox" value = ""/> <label for = "E4X"> E4X </label>
<Input name = "C3" id = "WML" type = "checkbox" value = ""/> <label for = "WML"> WMLScript </label>
</Div>
</Div>
</Fieldset>
</Form>
<SCRIPT type = "text/JavaScript">
/*
Tab usage:
New tab (tag id, Id separator, click trigger function, what event trigger tab <strong> <font color = "# ff0000"> switch </font> </strong> );
Tag ID: The name format of the ID is: prefix + delimiter + HTML Tag Name of the tab + tag style in the active state + separator + tag style in the inactive state (required)
Id separator: separator (required)
The function is triggered when tab <strong> <font color = "# ff0000"> switches </font> </strong>: trigger function when tab <strong> <font color = "# ff0000"> switch </font> </strong> (optional)
What event trigger tab <strong> <font color = "# ff0000"> switch </font> </strong>: Optional (onclick by default)
Note: When a tag ID is named, the prefix is used as the new ID value of the tag. Therefore, the prefix must not be the same as the id value of any element.
Return Value: the object of the tag ID.
<Strong> <font color = "# ff0000"> project name naming rules for tag switching </font> </strong>:
Prefix + _ + sequential Value
For more information, see the above Code, such
The object whose ID is "test3_li_now _" indicates:
Prefix: test3
The Li label under the "test3_li_now _" label is used as the tab item.
Now is the style when the label is activated
"" The last blank is the style in the inactive state.
The ID of each element in the active state of each tag item should be named:
Test3_1 project corresponding to the first tag item
Test3_2 project corresponding to the second tag item
Test3_3 project corresponding to the third tag item
And so on.
*/
Window. onload = function (){
New tab ('test1 _ li_now _ ',' _ ', null, 'onmouseover ');
New tab ('test2 _ li_now _');
New tab ('test3 _ li_now _ ',' _ ', function (){
Alert ('the order you have now is '+ this ['index'] +! ');
});
New tab ('test4-input-input_tab1-input_tab2 ','-');
}
</SCRIPT>
</Body>
</Html>
Table of tabs
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
