1

ページの適切なセクションにリンクするアンカーを持つページがあります。リンクがクリックされたとき、およびウィンドウ/ページがjQueryを使用して適切なdivにスクロールしたときに、アンカーリンクのクラスを切り替える方法について誰かアドバイスがあるかどうか疑問に思っていますか?

たとえば、3 つのセクションにリンクする 3 つのアンカー リンクがあります。

<ul>
  <li><a href="#section1">Section 1</li>
  <li><a href="#section2">Section 2</li>
  <li><a href="#section3">Section 3</li>
</ul>

次に、3 つのセクションがあります。

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

私が達成したいのは、ページがdivの1つにスクロールするか、アンカーがクリックされたときに、アンカーリンクのクラスがトグルすることです。したがって、#section 1 アンカーをクリックするか、ページを #section1 div までスクロールすると、section1 アンカー リンクにクラスが追加されます。セクション 2 の場合、#section2 リンクはクラスを受け取り、section1 リンクはクラスを削除するなどです。

各セクション div の位置を追跡し、適切なリンクでクラスを切り替える方法が必要になると思いますが、どこから始めればよいかわかりません。

ヘルプやアドバイスをお寄せいただきありがとうございます。

4

1 に答える 1

4

各セクションの合計高さを見つけることをお勧めします。各セクションの間にも休憩はないと仮定しています。次に、jQuery を使用してウィンドウの位置を決定します。ウィンドウの位置が特定の値に達したら、クラスを切り替えます。リンクをクリックするとスクロールし、前述の関数が実行され、クラスが変更されます。

ここにいくつかの擬似コードがあります

$(document).ready(function(){
    var section1Height = $('#section1').height();
    var section2Height = $('#section2').height();
    var section3Height = $('#section3').height();

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        if(winTop >= section1Height && winTop <= section2Height){
            $('#section1').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section2Height && winTop <= section3Height){
            $('#section2').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section3Height){
            $('#section3').addClass("newClass").not().removeClass("newClass");
        }
    });
});

繰り返しますが、これは簡単な例です。あなたの側の詳細で、私はより詳細な答えを与えることができます。

于 2012-12-13T17:22:27.880 に答える