1

簡単な質問があります。3つのコンテンツボックスがあり、すべてに下のコンテンツボックスへのアンカーリンクが付いたメニューがあります。サイトにアクセスすると、最初のアンカーがアクティブに設定されます。見出し1の2番目をクリックすると、2番目のアンカーにジャンプします。しかし、問題は、マウスホイールで少し上にスクロールして設定する必要があることです。 2番目のアンカーがアクティブです。

そして後方にも。アンカー1のbox3をクリックすると。

問題を解決するためのアイデアはありますか？

上下にスクロールすると完璧に機能します！アンカーが作った問題を飛び越えるだけ

これがデモです：http： //jsfiddle.net/wv9EQ/

これがjavascriptコードです：

$(function(){
    var sections = {},
        _height  = $(window).height(),
        i        = 0;

    //// Grab positions of our sections
    $('.section').each(function(){
        sections[this.name] = $(this).offset().top;
    });

    $(document).scroll(function(){
        var $this = $(this),
            pos   = $this.scrollTop();

        for(i in sections){
            if(sections[i] > pos && sections[i] < pos + _height){
                $('a').removeClass('active');
                $('.nav_' + i).addClass('active');
            }  
        }
    });
});

編集：すべてのリンクにアクティブを追加することはできません！この小さなナビをphpとして含め、すべてのボックスに動的に追加します。すべてのアンカーがアクティブであるよりもすべてをアクティブに設定した場合：D

4

3 に答える 3

1

リンクがクリックされたときに同じようなことをするだけです。

$('.head-nav-button').click(function()
{
    $('a').removeClass('active');
    $('.nav_' + $(this).attr('href').replace('#', '')).addClass('active');
});

http://jsfiddle.net/wv9EQ/7/

于 2012-11-09T11:01:53.003 に答える
1

コードには簡単な方法を使用してください

http://jsfiddle.net/wv9EQ/4/

  <li><a href="#2-SP" class="head-nav-button nav_2-SP active">2. SP.</a></li>
于 2012-11-09T10:50:40.907 に答える
1

これを削除します

for(i in sections){
        if(sections[i] > pos && sections[i] < pos + _height){
            $('a').removeClass('active');
            $('.nav_' + i).addClass('active');
        }  
    }

そして、ここのように必要な場所に「アクティブ」クラスを追加するだけですhttp://jsfiddle.net/wv9EQ/6/

于 2012-11-09T10:52:00.063 に答える