jQueryの簡単な実装 tab_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 16:57:56

オリジナル

841 人が閲覧しました

jQueryはタブ関数を実装しています。まずインターフェースを設定します。

ナビゲーションヘッダー tab_menu とコンテンツ tab_box があります。

クリックすると、対応するコンテンツが表示され、他のコンテンツが非表示になるという効果が得られます。

同時に、選択されたステータスを示すために、選択されたアイテムに背景が追加され、違いが示されます。

今回は自分でコードを書きました。まず HTML 部分を見てみましょう:

コードをコピーしますコードは次のとおりです。次のように:

 ;/li>
 < ;div class="tab_box"> 
 < ;エンターテイメント

HTML では、内部に 2 つのサブ div を含む大きな div が必要です。ナビゲーションヘッダー tab_menu として機能し、もう 1 つはコンテンツ本体 tab_box として機能します。 CSS コードは、HTML コンテンツのレイアウトを担当します。

CSS 部分:

コードをコピー

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

*{margin:0;padding:0;}.tab{ width:240px;

margin:50px;

 /*border:1px Solid;*/
} 
.tab_menu{
 clear:both;
}
.tab_menu li{
 float:left; // ナビゲーションヘッドを左にフローティングします
 text-align: center; // ナビゲーションヘッドを左に移動します 
 list-style:none // マーク記号を削除します
 background:#F1F1F1; // デフォルトの背景色を設定します
 border:1px; #898989; //境界線の色を設定します
 margin- right:4px; //各li間の距離は4pxです
cursor:pointer; //マウスが上に移動すると、小さな手のマークが表示されます
padding:1px 6px; //li
 border-bottom:none 

}
.tab_menu li.hover{
 背景:#DFDFDF;
 }
.tab_menu li.selected{// が選択されています 背景と色の追加オプション 
 color:#FFF; 
 background:#6D84B4;
}
.tab_box{
 clear :both; // フロート効果の影響をクリアします
 height: 100px; // 高さを 100px に設定します
 border:1px Solid #898989; // コンテンツ本文の境界線のスタイルを設定します
}
.hide{//非表示にする必要があるコンテンツ div を非表示にします
 display:none ;
}


レイアウトが完了したら、jQuery アクションを実行します: 
 



コードをコピー