:
Dynamic Effect TAB jquery plugin
Copy codeThe 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> untitled document </title>
<Link href = "tab.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript" src = "jquery-1.6.2.min.js"> </script>
<Script type = "text/javascript" src = "tab. js"> </script>
<Script type = "text/javascript">
$ (Function (){
Zeng. tab. init ();
});
</Script>
</Head>
<Body>
<Div class = "clearfix" id = "hot">
<Div class = "main_l tab">
<Div class = "main_title clearfix">
<Ul class = "fx">
<Li class = "on"> <a href = "#"> You Are gril </a> </li>
<Li class = ""> I am a boy </li>
</Ul>
</Div>
<Div class = "t">
<Div class = "main_content clearfix">
I'm in Shangri-la
</Div>
</Div>
<Div class = "t none">
<Div class = "main_content clearfix">
Haha
</Div>
</Div>
</Div>
</Div>
</Body>
</Html>
Style:Copy codeThe Code is as follows: @ charset "UTF-8 ";
/* CSS Document */
# Hot {
Height: 565px;
Overflow: hidden;
}
. Clearfix {
Display: block;
}
. Clearfix: after {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
Ul {
List-style: none outside none;
}
Body {
Line-height: 1.5;
}
A, a: link, a: visited {
Color: #333333;
Text-decoration: none;
}
A: hover {
Color: # FF6600;
Text-decoration: none;
}
. Main {
Padding: 0 10px 0 167px;
Position: relative;
Width: 823px;
}
. Main_l {
Float: left;
Position: relative;
Width: 513px;
}
. Main_r {
Float: right;
Position: relative;
Width: 300px;
}
. Main_title {
Background: url ("images/s.png") no-repeat scroll 0 0 transparent;
Float: left;
Height: 28px;
Overflow: hidden;
}
. Main_title ul {
Font-size: 14px;
}
. Main_title ul li {
Background: none repeat scroll 0 0 # F1F1F1;
Border-left: 1px solid # FFFFFF;
Border-right: 1px solid # FFFFFF;
Border-top: 3px solid # FFFFFF;
Float: left;
Height: 23px;
Line-height: 23px;
Padding-left: 16px;
Padding-right: 16px;
Padding-top: 1px;
}
. Main_title ul. on {
Background: none repeat scroll 0 0 # FFFFFF;
Border-color: #009AD9 #009AD9 # FFFFFF;
Border-style: solid;
Border-width: 4px 1px 1px;
Height: 22px;
Line-height: 22px;
Padding-left: 16px;
Padding-right: 16px;
}
. Main_title ul. on {
Font-weight: 700;
}
. Main_title span {
Float: right;
Line-height: 24px;
Padding-right: 10px;
Padding-top: 4px;
}
. Main_l. main_title {
Overflow: hidden;
Width: 513px;
}
. Main_l. main_content {
Width: 513px;
}
. Tab div. t. none {
Display: none;
}
. Tab. main_title ul. fx li, # link. main_l. main_title ul. fx li {
Background-color: transparent;
}
. Tab. main_title ul. fx li,. tab. main_title ul. fx li. on {
Border-top: 0 none;
Margin-top:-8px;
Padding-top: 0;
}
. Tab. main_title ul. fx li. on {
Border-bottom-width: 0;
Border-left-color: transparent;
Border-right-color: transparent;
}
. Tab. main_title ul. fx {
Position: relative;
Z-index: 20;
}
. Tab. main_title div. animate {
Background-color: # FFFFFF;
Border-color: #009AD9 #009AD9 # FFFFFF;
Border-style: solid;
Border-width: 4px 1px 1px;
Height: 23px;
Position: absolute;
Top: 0;
}
Tab source code:Copy codeThe Code is as follows :/*
* Tab 1.0
* Date:
* Http://zengxiangzhan.cnblogs.com/
*/
Var zeng = zeng || {};
Zeng. tab = {
T: null,
DelayTime: 150,
Fx: true,
Tab: function (B ){
$ (B). siblings (). removeClass ("on ");
$ (B). addClass ("on ");
Var c = $ (B). parents (". tab"). find ("div. t ");
Var a = c. eq ($ (B). index ());
C. addClass ("none ");
A. removeClass ("none ");
If (this. fx ){
If ($ (B). parent (). hasClass ("nofx ")){
Return
}
$ (B). parent (). siblings (". animate"). width ($ (B). outerWidth ()-2). animate ({
Left: $ (B). position (). left
}, "Slow ")
}
},
DelayTab: function (B, ){
ClearTimeout (B. t );
This. t = setTimeout (function (){
B. tab ()
}, This. delayTime)
},
Init: function (){
Var a = this;
A. animate ();
If (window. Touch ){
$ (". Tab. main_title> ul> li [class! = 'On']> a "). click (function (){
Return false
})
}
$ (". Tab. main_title> ul> li,. tab> ul. hotread_menu> li"). hover (function (){
A. delayTab (a, this)
}, Function (){
ClearTimeout (a. t)
})
},
Animate: function (){
If (! This. fx ){
Return
}
$ (". Tab. main_title> ul"). each (function (){
If (! $ (This). hasClass ("nofx ")){
$ (This). addClass ("fx ")
}
});
$ (". Tab. main_title"). each (function (a, B ){
If ($ (this). find ("ul"). hasClass ("nofx ")){
Return
}
$ (B). append ("<div class = 'animate'> </div> ");
$ (B ). find (". animate "). width ($ (B ). find ("ul> li. on "). outerWidth ()-22.16.css ("left", $ (B ). find ("ul> li. on "). position (). left)
})
}
};
Author: Zeng xiangzhan