動感效果的TAB選項卡jquery 插件

更新時間：2011年07月09日 23:13:57 作者：

動感效果的TAB選項卡jquery 插件,需要的朋友可以參考下。

效果圖:

動感效果的TAB選項卡 jquery 插件

復(fù)制代碼代碼如下:

 
<!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>無標題文檔</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="#">你是gril</a></li> 
<li class="">我是boy</li> 
</ul> 
</div> 
<div class="t"> 
<div class="main_content clearfix"> 
我在香格里拉 
</div> 
</div> 
<div class="t none"> 
<div class="main_content clearfix"> 
呵呵 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 

樣式：

復(fù)制代碼代碼如下:

 
@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選項卡源代碼：

復(fù)制代碼代碼如下:

 
/* 
* 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) 
}) 
} 
}; 