ダイナミックエフェクトTABタブjquery plug-in_jquery-jsチュートリアル-php.cn

エフェクト画像:
ダイナミックエフェクトTABタブjquery plug-in_jquery
ダイナミックエフェクトTABタブjqueryプラグイン

コードをコピーコードは次のとおりです

無題ドキュメント

あなたはグリルです

私は男の子です

へへ

🎜>
スタイル:

コードをコピー

コードは次のとおりです:

@charset "utf-8";
/* CSS ドキュメント */

#hot {
height: 565px;
overflow: hidden;

} display:ブロック; } .clearfix::after { コンテンツ: "."; 高さ: 0; 可視性:非表示;

}

ul {
リストスタイル: 外側なし;
ボディ {
行の高さ: 1.5;
a, a :link, a:visited {
color: #333333;
text-decoration: none;
a:hover {
color: #FF6600;なし;
}
.main {
パディング: 0 10px 0 167px;
幅: 823px;
float : 左;
幅: 513px;
.main_r {
位置: 相対; >}
.main_title {
背景: url("images/s.png") 繰り返しなしスクロール 0 0 透明;
高さ: 28px;非表示;
}
.main_title {
font-size: 14px;
}
.main_title ul li {
background: none 繰り返しスクロール 0 0 #F1F1F1;ボーダー左: 1 ピクセルのソリッド # FFFFFF;
ボーダー上: 3 ピクセルのソリッド #FFFFFF;
高さ: 23 ピクセル;行の高さ: 23px;
パディング左: 16px;
パディングトップ: 1px;
.main_title ul .on {
: なし繰り返しスクロール 0 0 # FFFFFF;
ボーダーカラー: #009AD9 #009AD9 #FFFFFF;
ボーダー幅: 4px 1px 1px;
line-height: 22px;
padding-left: 16px;
}
.main_title .on a {
font-weight: 700;
}
.main_title スパン {
float: right;
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;
ボーダー左色: 透明; -right-color: 透明;
}
.tab .main_title ul.fx {
位置: 相対;
}
.tab .main_title div .animate {
背景色 : #FFFFFF;
境界線の色: #009AD9 #009AD9 #FFFFFF;
境界線の幅: 4px 1px 1px;高さ: 23px;
位置: 絶対;
}

タブ选项卡源代：

复制代代码如下:

/* 
* タブ 1.0 
* 日付: 2011-07-09 15:29 
* http://zengxiangzhan.cnblogs.com/ 
*/ 
var zeng = zeng || {}; 
zeng.tab = { 
t: null, 
layTime: 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 
}, "遅い" ) 
} 
}, 
layTab: function(b, a) { 
clearTimeout(b.t); 
this.t = setTimeout(function() { 
b.tab(a) 
}, this.layTime) 
}, 
init: function() { 
var a = これ; 
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.layTab(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) 
}) 
} 
}; 

作者：曾祥展