ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryの簡単な実装 tab_jquery
jQueryの簡単な実装 tab_jquery
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 16:57:56835ブラウズ
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 アクションを実行します:
コードをコピー
}
.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 アクションを実行します:
コードをコピー
コードは次のとおりです:
ここの処理は特に巧妙で、li のインデックスを取得してオプション本体を処理します。インデックス値という隠された対応関係を巧みに利用しています。
このように、オプションヘッダーとオプションボディの内容が一致していなくても、連携効果は得られます。
今回の演習を通して、まずは頭を使って考えたほうが良いと感じました。考え方の違いを発見することによってのみ、欠点を発見し、ギャップを知ることができます。場合によっては、あなたのアイデアがさらに良くなることがあります!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。