- 第一模块
- 第二模块
- 第三模块
第 1 块
代コードは完全に、詳細は、デモ中のtangtab.js のコメントを参照してメソッドを使用します。 ://demo.jb51.net/js/2012/TabDemo/
打包下ダウンロード：
TabDemo_jb51.rar
ホームページ >ウェブフロントエンド >jsチュートリアル >jquery に基づいて独自のタブ スライディング ドアを作成する (ユニバーサル バージョン)_jquery
jquery に基づいて独自のタブ スライディング ドアを作成する (ユニバーサル バージョン)_jquery
- WBOYオリジナル
- 2016-05-16 17:48:381174ブラウズ
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:
复制代代码如下:
代コードは完全に、詳細は、デモ中のtangtab.js のコメントを参照してメソッドを使用します。 ://demo.jb51.net/js/2012/TabDemo/
打包下ダウンロード：
TabDemo_jb51.rar
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。