동적 효과 탭 탭 jquery Plug-in_jquery

효과 그림:

동적 효과 TAB 탭 jquery 플러그인

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

< ;/div>

헤헤
div>

🎜>
스타일:




코드 복사

코드는 다음과 같습니다.

@charset "utf-8"; /* CSS 문서 */ #hot { 높이: 565px; 오버플로: 숨겨진; } 디스플레이: block;

}

.clearfix::after {
content: ".";
display: block;
clear: 둘 다
숨겨진;
}
ul {
목록 스타일: 없음
}
body {
줄 높이:
}
a, :link, a:visited {
색상: #333333;
텍스트 장식: 없음
}
a:hover {
색상: #FF6600
텍스트 장식: 없음;
}
.main {
패딩: 0 10px 0 167px;
위치: 상대
폭: 823px; : 왼쪽;
위치: 상대;
}
.main_r {
위치: 상대;
}
.main_title {
배경: url("images/s.png") 반복 없음 스크롤 0 0 transparent;
float: 왼쪽;
높이: 28px; 숨겨진;
}
.main_title ul {
글꼴 크기: 14px;
}
.main_title ul li {
배경: 없음 반복 스크롤 0 0 #F1F1F1; 테두리 왼쪽: 1px 솔리드 # FFFFFF; 테두리 오른쪽: 1px 솔리드 #FFFFFF;
테두리 상단: 3px 솔리드 #FFFFFF;
높이: 23px; line-height: 23px;
padding-left: 16px;
padding-top: 1px;
.main_title ul .on {
: 없음 반복 스크롤 0 0 # FFFFFF;
border-style: solid;
height: 22px;
줄 높이: 22px;
왼쪽 패딩: 16px;
오른쪽 패딩: 16px;
}
.main_title ul .on { ​​
700;
}
.main_title 범위 {
float: right;
line-height: 24px;
padding-right: 10px; }
.main_l .main_title {
오버플로: 숨김;
너비: 513px;
}
.main_l .main_content {
너비: 513px>}
tab div.t.none {
디스플레이: 없음;
}
.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li {
배경색: 투명;
}
.tab .main_title ul.fx li, .tab .main_title ul.fx li.on {
border-top: 0 none
margin-top: -8px; 패딩 상단: 0;
}
.tab .main_title ul.fx li.on {
테두리 하단 너비: 0
테두리 왼쪽 색상: 투명; -오른쪽 색상:
}
.tab .main_title ul.fx {
위치: 상대
z-색인: 20
}
.tab .main_title div .animate {
배경 색상: #FFFFFF;
테두리 색상: #009AD9 #009AD9 #FFFFFF;
테두리 스타일:
테두리 너비: 4px 1px 1px; 높이: 23px;
위치: 절대
상단: 0
}


탭选项卡 源代码:

复代码 代码如下:

/*
* 탭 1.0
* 날짜: 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("없음");
a.removeClass("none");
if (this.fx) {
if ($(b).parent().hasClass("nofx")) {
return
}
$(b).parent( ).siblings(".animate").width($(b).outerWidth() - 2).animate({
왼쪽: $(b).position().left
}, "느림" )
}
},
delayTab: function(b, a) {
clearTimeout(b.t);
this.t = setTimeout(function() {
b.tab(a)
}, this.delayTime)
},
init: function() {
var a = 이;
a.animate();
if (window.Touch) {
$(".tab .main_title>ul>li[class!='on']>a").click(function() {
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("왼쪽", $(b).find("ul>li.on").position() .left)
})
}
};

작가:曾祥展