タブラベル切り替えエフェクト code_extjs-jsチュートリアル-php.cn

タブラベル切り替えエフェクト code_extjs

WBOY

リリース： 2016-05-16 18:54:48

オリジナル

1571 人が閲覧しました

HTML:

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

最新のアップデート

;< ;a title="企業ニュース">企業ニュース

< ;a title="業界ニュース">業界ニュース

;a title="コラム記事">コラム記事

< a title="テクノロジーニュース">テクノロジーニュース

div>

CSS:

コードをコピー

コードは次のとおりです: #tabsK { float:left; line-height:normal; border-bottom:1px ソリッド

}

 # tabsK ul { 
margin:0; 
list-style:none; 
#tabsK li { 
display:inline; > マージン:0; 
パディング:0; 
カーソル:ポインタ; 
#tabsK a { 
float:left; " ) no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
#tabsK a span { 
float : 左; 
表示:ブロック; 
背景:url("image/tabrightK.gif") 繰り返しなし 
パディング:8px 4px 6px; 🎜 >} 

#tabsK a span {float:none;} 
/* IE5-Mac ハックの終了 */ 
#tabsK a:hover span { 
cursor:pointer; > color:#FFF; 
背景位置:100% -42px; 
#tabsK a:hover { 
背景位置:0% -42px; 
} 
#tabsK .hover スパン 
{ 
背景位置:0% -42px; 
} 
#tabsK .hover スパン 
{ 
背景位置: 100% -42px; 

.tab2 ul 
{ 
list-style-type:none; > } 
.tab2 ul li 
{ 
text-align:left; 
line-height:20px; 
} 
.tab2 。 block 
{ 
display:block; 
}


JS: 




コードをコピー

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