动感效果的tab选项卡 jquery 插件
复制代码 代码如下:
无标题文档
你是gril
我是boy
我在香格里拉
呵呵
样式：
复制代码 代码如下:
@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 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(
);
$(b).find(.animate).width($(b).find(ul>li.on).outerwidth() - 2).css(left, $(b).find(ul>li.on).position().left)
})
}
};
作者：曾祥展