Effect Chart:
Mobile Effect tab TAB jquery Plugin
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<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 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" >
Oh
</div>
</div>
</div>
</div>
</body>
Style:
Copy Code code 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 a {
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 TAB Source code:
Copy Code code as follows:
/*
* Tab 1.0
* date:2011-07-09 15:29
* 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, a) {
Cleartimeout (B.T);
THIS.T = settimeout (function () {
B.tab (a)
}, 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 ()-2). CSS (' left ', $ (b). Find ("Ul>li.on"). Position (). left)
})
}
};
Author: Zengxiang exhibition
