コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jquery に基づいて独自のタブ スライディング ドアを作成する (ユニバーサル バージョン)_jquery

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

WBOY
リリース： 2016-05-16 17:48:38
オリジナル
1178 人が閲覧しました

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:
复制代代码如下:




  • 第一模块

  • 第二模块

  • 第三模块



第 1 块





代コードは完全に、詳細は、デモ中のtangtab.js のコメントを参照してメソッドを使用します。 ://demo.jb51.net/js/2012/TabDemo/

打包下ダウンロード：
TabDemo_jb51.rar
関連ラベル：
tab 引き戸
ソース：php.cn
前の記事：非同期 javascript_javascript 手法の原理と実装手法の紹介 次の記事：変数が未定義かどうかを判断する js コード_javascript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
から 2024-04-06 11:35:59
0
1
456
再タイトル: 縦型製品ディスプレイ 私の Web ページでは、現在、プロジェクト製品が行ごとに縦方向にリストされています。縦にスクロールして表示したいのですが。水平に変更するにはどうすればよいですか? divclas...
から 2024-04-05 09:17:50
0
1
3505
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート