jqueryタブの作成 page_jquery

ここで特に注意する必要があるのは、ユーザーが悪意を持ってマウスを動かし、大量のリクエストを引き起こしてサーバーがクラッシュするのを防ぐために、ラベルのマウスオーバー イベントに遅延を設定することです。関数は、主にダウンロードされたイベントに使用されます

1 $().each(function(){}) これは、すべてのタグを走査する非常に重要な方法です

2 マウスオーバー イベント、

とキー CSS スタイル 表示されるスタイルを記述して制御します。

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

;tab
< リンク rel="stylesheet" type="text/css" href="css/tab.css">

>

タグ1
• Tag2
< ;/div> 🎜>



コードをコピー


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

ul ,li { margin:0px;
padding: 0px;
}
li { float:left; #66CC00;
margin-right:2px; //これは

border:1px ソリッドホワイトを設定します。

}

.listli {background-color: #663333; } div {clear:left; >幅:300ピクセル; 背景色: #663333; 表示:なし; 🎜>.divarea { display:block; }

次のステップは、スライディングを制御するための js を作成することです




コードをコピーします


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


// グローバル変数を定義します
var timeout;
$(document).ready(function(){
//すべての li タグを検索します
$("li").each(function(index){

$(this).mouseover(function(){
//スライド ドアは必須ですユーザーがマウスを乱暴に動かしてサーバーがクラッシュするのを防ぐために、遅延時間を設定します。これは非常に重要です。
timeout =setTimeout (function(){
$("div.divarea").removeClass("divarea) ");
$("li.listli").removeClass("listli");
// $( "div").eq(index).addClass("divarea"); // 別の方法書き込む場合は次のようになります:$(div:eq(index)).addClass("divarea");
$("div: eq("index ")").addClass("divarea"); ("li").eq(index).addClass("listli");
},
320);
$(this).mouseout(function(){
clearTimeout(timeout) ;

});
});