jQueryの簡単な実装 tab_jquery

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 アクションを実行します:




コードをコピー

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

// $(function(){

var $div_li =$("div.tab_menu ul li");

$div_li.click(function(){

/他の兄弟要素の強調表示を削除

要素 var index = $div_li.index(this); // 現在のインデックスを取得します。すべての li 要素内の

要素をクリックしました。 "div.tab_box > div") //子ノードが選択されていない場合はエラーが発生します。 div

.eq (index).show() // 対応する

要素を表示します。 .siblings().hide(); // 他の

要素を非表示にします。

})

//]]> ;

ここの処理は特に巧妙で、li のインデックスを取得してオプション本体を処理します。インデックス値という隠された対応関係を巧みに利用しています。

このように、オプションヘッダーとオプションボディの内容が一致していなくても、連携効果は得られます。

今回の演習を通して、まずは頭を使って考えたほうが良いと感じました。考え方の違いを発見することによってのみ、欠点を発見し、ギャップを知ることができます。場合によっては、あなたのアイデアがさらに良くなることがあります!