JQuery_jquery に基づくマルチタグ実装コード-jsチュートリアル-php.cn

今日共有したいのは、JQuery をベースにしたマルチタブ切り替えです。JQuery については、あまり紹介する必要はありません。もちろん、このような小さな例はたくさんあります。私自身の考えの。

次は、この例で使用される HTML ページです:

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

JQueryProject1

< ;!-- 日付: 2012-09-17 -->

タブ 1

タグ 3

これはコンテンツ 1

これはコンテンツ 2

これはコンテンツ 3

現在、ページにはタグの効果がないため、ページにタグの効果を表示するには、CSS ファイルを片側に追加します:

コードをコピーします

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

display: block text-decoration: none; ; } #contenTab ul{ リストスタイル: なし; マージン:0px; #content div.showContent{ >line-height:100px;

表示: ブロック;

背景色:#B0C4DE; 
.showTab{ 
背景色:#B0C4DE; : 1px ソリッド #B0C4DE; 
div li{ 
background-color:#5F9EA0; 
border-bottom: 1px ソリッド ホワイト 
border-right; : 1 ピクセルの白; 
高さ: 30 ピクセル; 
テキストの位置: 中央; >#content div{ 
背景色: #B0C4DE; 
クリア: 左; 
高さ: 100 ピクセル; 

 ここまでは単なる静的なページであり、次のステップが最も重要な部分です。この部分はマウスを動かしてタグを切り替え、動的ページを実現する必要があります。別の JS ファイルを追加します。もちろん、JQuery に基づく JS ファイルは必須です。この例では、JQuery 公式 Web サイトから入手できる最新の jquery-1.8.1.min.js を使用します。この例ではラベル切り替えを実装します。 




コードをコピー


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


$( function(){ 
$("#contenTab li").each(function() { 
var tab = $(this); 
var timeoutID; 
tab.hover(function(){ 
timeoutID = setTimeout(function(){ 
$(".showTab") .removeClass("showTab"); 
$(".showContent").removeClass("showContent"); 
 tab.addClass("showTab"); 
$($("#content div" ).get($("#contenTab li").index(tab)).addClass("showContent"); >},300); 
},function(){ 
});

これまでのところ、複数タブの切り替えが実装されています。この例については、次のような注意点があります: 

1. マウスがラベル上に移動したとき (つまり、) にマウスの形状を手の形に変更するには、この例は次のようになります。もちろん、簡単な方法は、コンテンツを 
 に追加することです。 

2. JSコードではVar timeoutID = setTimeout(function, time)を使用していますが、これはマウスが速く動いた場合の誤操作を避けるためであり、関数内の遅延時間はミリ秒後に実行されるコンテンツ、つまり、マウスがラベルに移動したとき、即時の切り替えアクションは実装されませんが、マウスが時間ミリ秒以内にラベルから離れた場合、切り替えアクションは時間ミリ秒後に遅延します。 ClearTimeout(timeoutID) が実行されるため、関数内の内容は time ミリ秒後に実行されなくなり、マウスの素早い動きによる誤操作が回避されます。 

今日はここまでです。お役に立てば幸いです。