jqueryタブの作成 page_jquery-jsチュートリアル-php.cn

jqueryタブの作成 page_jquery

WBOY

リリース： 2016-05-16 18:27:36

オリジナル

1492 人が閲覧しました

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

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) ; 