<! 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> jquery tab effect code for two instances </title>
<Link href = "../images/res/master.css tutorial" rel = "stylesheet" type = "text/css"/>
</Head>
<Body>
<Script src = "http://www.google.com/ API"> </script>
<Script type = "text/Webpage effects">
Google. load ("jquery", "1.3.1 ");
</Script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Tab1 li"). each (
Function (I ){
$ (This). click (function (){
If (! $ (This). hasclass ("hover ")){
$ ("# Tab1 li"). removeclass ("hover ");
$ (This). addclass ("hover ")
$ (". List1"). removeclass ("tabnow ");
$ (". List1"). eq (I). addclass ("tabnow ");
}
});
})
$ ("# Tab2 li"). each (
Function (j ){
$ (This). click (function (){
If (! $ (This). hasclass ("hover ")){
$ ("# Tab2 li"). removeclass ("hover ");
$ (This). addclass ("hover ")
$ (". List2"). removeclass ("tabnow ");
$ (". List2"). eq (j). addclass ("tabnow ");
}
});
}
);
})
</Script>
<Div class = "news">
<Ul class = "tab" id = "tab1">
<Li class = "hover"> company news
<Li> industry news
<Li> common sense
</Ul>
<Div class = "lists">
<Div style = "padding: 10px 0;" class = "list1 tabnow">
Shown here
Class & quot; list1 & quot; Content
</Div>
<Div class = "list1"> shown here
Class & quot; list2 & quot; content </div>
<Div class = "list1"> shown here
Class & quot; list3 & quot; content </div>
</Div>
</Div>
<Div class = "products">
<Ul class = "tab" id = "tab2">
<Li class = "hover"> machinery
<Li> Forging
<Li> metal
</Ul>
<Div>
<Div class = "list2 tabnow">
<Div class = "columnspace"
Id = "elem-frontproducts_list01-1277815698970" name = "item list">
<! -- # Include virtual = "/comp-frontproducts_list01-1277815698970" --> </div>
</Div>
<Div class = "list2"
Style = "display: none"> displayed here
Class & quot; list2 & quot; content </div>
<Div class = "list2"
Style = "display: none"> displayed here
Class & quot; list3 & quot; content </div>
</Div>
</Div>
</Body>
</Html>
Effect of tabs written by jquery
<Script>
$. Fn. tabs = function (tablist, tabtxt, options ){
Var _ tablist = $ (this). find (tablist );
Var _ tabtxt = $ (this). find (tabtxt );
// To simplify the operation, the mandatory tab must be implemented using the li label.
Var tablistli = _ tablist. find ("li ");
Var defaults = {currenttab: 0, defaultclass: "current", isautoplay: false, step time: 2000, switchingmode: "c "};
Var o = $. extend ({}, defaults, options );
Var _ isautoplay = o. isautoplay;
Var _ steptime = o. steptime;
Var _ switchingmode = o. switchingmode;
_ Tablist. find ("li: eq (" + o. currenttab + ")"). addclass (o. defaultclass );
// Enforce that the content layer must be implemented using div
_ Tabtxt. children ("div"). each (function (I ){
$ (This). attr ("id", "wp_div" + I );
Registry.eq(o.currenttab).css ({"display": "block "});
Tablistli. each (
Function (I ){
$ (Tablistli [I]). mouseo tutorial ver (
Function (){
If (_ switchingmode = "o "){
$ (This). click ();
}
_ Isautoplay = false;
}
);
$ (Tablistli [I]). mouseout (
Function (){
_ Isautoplay = true;
}
)
}
);
_ Tabtxt. each (
Function (I ){
$ (_ Tabtxt [I]). mouseover (
Function (){
_ Isautoplay = false;
}
);
$ (_ Tabtxt [I]). mouseout (
Function (){
_ Isautoplay = true;
}
)
});
//}
// Else {
Tablistli. each (
Function (I ){
$ (Tablistli [I]). click (
Function (){
If ($ (this). classname! = O. defaultclass ){
$ (This). addclass (o. defaultclass). siblings (). removeclass (o. defaultclass );
}
If ($. browser. msie ){
_ Tabtxt. children ("div" ).eq( I ).siblings().css ({"display": "none "});
_ Tabtxt. children ("div"). eq (I). fadein (600 );
} Else {
_ Tabtxt. children ("div" ).eq( I ).css ({"display": "block" }).siblings().css ({"display": "none"}); // standard style
}
}
)
}
);
//}
Function selectme (oo ){
If (oo! = Null & oo.html ()! = Null & _ isautoplay ){
Oo. click ();
}
If (oo.html () = null ){
Selectme (_ tablist. find ("li"). eq (0 ));
} Else {
Window. settimeout (selectme, _ steptime, oo. next ());
}
}
If (_ isautoplay ){
// Alert ("_ isautoplay:" + _ isautoplay );
Selectme (_ tablist. find ("li"). eq (o. currenttab ));
}
// Alert (_ isautoplay );
Return this;
};
Var username = "wbpbest ";
Var _ sti = setinterval;
Window. setinterval = function (callback, timeout, param ){
Var args = array. prototype. slice. call (arguments, 2 );
Var _ cb = function (){
Callback. apply (null, args );
}
_ Sti (_ cb, timeout );
}
// Window. setinterval (hello, 3000, username );
Var _ sto = settimeout;
Window. settimeout = function (callback, timeout, param ){
Var args = array. prototype. slice. call (arguments, 2 );
Var _ cb = function (){
Callback. apply (null, args );
}
_ Sto (_ cb, timeout );
}
// Note: If a debugging error occurs, check the jquery version number that you reference. The currently referenced version is 1.3.
// Parameter description:
// Tablist: parent layer of the package Tab
// Tabtxt: parent layer of the Package content Layer
// Options. currenttab: Serial number of the activation Tab
// Options. defaultclass: name of the activation status style on the current tab. The default name is "current"
// Isautoplay: whether to automatically switch
// Steptime: Switching Interval
// Switchingmode: Switch Mode ('C' indicates click switch; 'O' indicates mouseover switch)
Js
<Script type = "text/javascript" src = "http://g.111cn.cn/javascript/js/bKjia.c0m.js"> </script>
</Script>
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
