JSでタブページ効果を実装(CSSあり)_javascriptスキル

達成された効果:

上の図に示すように、達成したい効果は、マウスが特定のタブに移動すると、次のコンテンツ 対応するコンテンツがエリアに表示され、対応するラベルの色を変更する必要があります。 図に示すように、現在のマウス位置は「ラベル 1」上にあり、コンテンツエリアに表示されるコンテンツは「」です。 「私はコンテンツ1」、「ラベル1」は「タグ2」「タグ3」より色が濃いです。同様に、「タグ2」と「タグ3」にマウスを移動すると、「私はコンテンツ2」 「コンテンツ3です」と表示されます。この効果はCSSとJSの連携によって実現されます。具体的なコードを見てみましょう:

まず HTML コードを見てみましょう:

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

コードをコピー

コードは次のとおりです。 $(document).ready(function( ){ var timeoutid;

$("#tabfirst li").each(function(index){

//li の各ラップされた JQuery オブジェクトは、関数内のコードを実行します
/ /index は、現在この関数コードを実行している li に対応するすべての li で構成される配列内のインデックス値です
//index の値を使用して、現在のラベルに対応するコンテンツ領域を見つけることができます
$ (this).mouseover(function(){
var liNode = $(this);
timeoutid = setTimeout(function(){
//元々表示されていたコンテンツを非表示にします
$("div. contentin" ).removeClass("contentin");
//元々 tabin 属性があったタグから tabin 属性を削除します
$("#tabfirst li.tabin").removeClass("tabin");
// 現在のタグに対応するコンテンツ領域を表示します
$("div.contentfirst").eq(index).addClass("contentin");
//$("div.contentfirst: eq(" Index " )").addClass("contentin");
//tabin 属性を現在のラベルに追加します
liNode.addClass("tabin");

},300 );

}).mouseout(function(){

clearTimeout(timeoutid);
}); 🎜>
これを除く 効果に加えて、同じ原理を使用して各ラベルをクリックする機能を登録することもでき、各ラベルがクリックされると、異なるページまたは任意のページの一部を元のコンテンツ領域にロードできます。ご興味がございましたら、ここをクリックしてソース コードをダウンロードしてください。ソース コードには、記事で言及されている 2 つの異なる関数によって実装されたさまざまな関数が含まれています。