0

私はこのように動作する私のウェブサイトのナビゲーションメニューを作成していました.ナビゲーション、矢印、メインコンテンツがあります. ページをロードすると、矢印がナビゲーションのホーム オプションを指し、他のオプションにカーソルを合わせると、現在ホバーされているオプションに移動し、マウスがナビゲーションから離れると、ホーム オプションに戻ります。

ホームページはなんとかできましたが、今は他の6ページに問題があります。常にホームページ オプションに戻るのではなく、常に href="#" を持つナビゲーション オプションに矢印を戻す方法がわかりません。ナビゲーションは垂直です。

ここに私のコードがあります:

$(document).ready(function() {

$('#arrow').css({'marginTop' : top});

$('ul li h3').hover(function(){

     var top = $(this).parent().position().top; //getting margin-top value of hovered element


$('#arrow').stop().animate({
    'marginTop' : top-115 //setting margin top,and removing 115px for aesthetics 

    });
},function(){
    $('#arrow').stop().animate({
    'marginTop' : 10 //here i set margin-top to 10 because that is where home option is
    })
});
});

デフォルトの margin-top の値を変えてページごとに .js ファイルを作成することでこれを解決できることはわかっていますが、そうすると新しいことは学べないので、この Web サイトを練習用に作成しています。

前もってありがとう、ドブリカ

4

1 に答える 1

0

テストはしていませんが、動作しない場合は非常に近いものになる可能性があります。

$(document).ready(); の先頭で var top を宣言します。

var top = $('ul li h3 a[href=#]').position().top;

使用しているスクリプトを実行して、矢印をその位置にアニメーション化します。

基本的には、href 値に「#」を含むアンカーを選択し、そのトップを取得して初期トップ値として設定します。

于 2012-11-23T12:42:11.767 に答える