jquery に基づいて独自のタブスライディングドアを作成する (ユニバーサルバージョン)

jquery に基づいて独自のタブスライディングドアを作成する (ユニバーサルバージョン)_jquery

WBOY

リリース： 2016-05-16 17:48:38

オリジナル

1142 人が閲覧しました

css:

复制代代码如下:

 
.main 
{ 
高さ:360ピクセル; 
幅:290ピクセル; 
ボーダー:1px ソリッド #444444; 
フォントサイズ:12px; 
カラー:#444444; 
マージン:20px; 
} 
.main_top 
{ 
高さ:30px; 
幅:290ピクセル; 
行の高さ:30px; 
text-align:left; 
背景色:#999999; 
border-bottom:1px ソリッド #444444; 
} 
.main_top ul 
{ 
padding:0px; 
マージン:0px; 
リストスタイルタイプ:なし; 
位置:絶対; 
} 
.main_top ul li.h_qian 
{ 
float:left; 
幅:80ピクセル; 
text-align:center; 
背景色:#999999; 
高さ:30px; 
} 
.main_top ul li.h_hou 
{ 
float:left; 
幅:80ピクセル; 
text-align:center; 
背景色:#ffffff; 
カーソル:ポインタ; 
マージントップ:1px; 
高さ:30px; 
フォントの太さ:太字; 
} 
.main_content 
{ 
margin:10px; 
} 

js:

复制代码代码如下:

 
function tabchange(obj,p,c,q,h) { 
$(obj).parent().find("li").attr("class", "" q ""); 
$(obj).parents("." p "").find("." c "").hide(); 
$(obj).attr("クラス", "" h ""); 
var j = $(obj).index(); 
$(obj).parents("." p "").find("." c ":eq(" j ")").show(); 
} 

html:

复制代代码如下: