How to automatically switch tabs using jQuery
This article mainly introduces jQuery's automatic switch of tab labels. Examples of jQuery's skills in operating tab, involving addClass, siblings, and removeClass chain operations are analyzed. For more information, see
This document describes how to automatically switch tabs using jQuery. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<! 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> automatic switch of tabs implemented by jQuery </title>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
Dl {
Margin: 10px auto;
Width: 500px;
Line-height: 24px;
Border-left: 1px solid # dcdcdc;
}
Dt. active {
Border-bottom: 1px solid # fff;
Position: relative;
}
Dt {
Padding: 0 10px;
Float: left;
Border: 1px solid # dcdcdc;
Border-left: 0;
Cursor: pointer;
Margin-bottom:-1px;
}
Dd {
Clear: both;
Width: 100%;
Border-left: 0;
Border: 1px solid # dcdcdc;
Border-left: 0;
Display: none;
}
</Style>
</Head>
<Body>
<Dl>
<Dt> nav1 </dt>
<Dt> nav2 </dt>
<Dt> nav3 </dt>
& Lt; dd & gt; 1111111111111111111111 & lt;/dd & gt;
& Lt; dd & gt; 2222222222222222222222 & lt;/dd & gt;
& Lt; dd & gt; 3333333333333333333333 & lt;/dd & gt;
</Dl>
<Script type = "text/javascript" src = "/html/txdm_2/images/20101004/jquery-1.2.6.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('Dt: first '). addClass ('active ');
$ ('Dd: first'mirror.css ('display', 'block ');
Autoroll ();
HookThumb ();
});
Var I =-1; // start with the I + 1 tab
Var offset = 2500; // rotation time
Var timer = null;
Function autoroll (){
N = $ ('dt'). length-1;
I ++;
If (I> n ){
I = 0;
}
Slide (I );
Timer = window. setTimeout (autoroll, offset );
}
Function slide (I ){
$ ('Dt '). eq (I). addClass ('active'). siblings (). removeClass ('active ');
Certificate ('dd'0000.eq(i0000.css('display', 'block'0000.siblings('dd'0000.css ('display', 'None ');
}
Function hookThumb (){
$ ('Dt'). hover (
Function (){
If (timer ){
ClearTimeout (timer );
I = $ (this). prevAll (). length;
Slide (I );
}
},
Function (){
Timer = window. setTimeout (autoroll, offset );
This. blur ();
Return false;
}
);
}
</Script>
</Body>
</Html>
I hope this article will help you design javascript programs.
