1

我有一个简短的问题.. 我有 3 个内容框，并且都有一个带有指向下面内容框的锚链接的菜单！当我访问该站点时，第一个锚点设置为活跃..当我现在点击标题 1 中的第 2 个时，它会跳转到第二个锚点..但问题是我必须用鼠标滚轮滚动一点上方才能设置第二个锚点处于活动状态。

和倒退。当我在anchor1上点击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

为您的代码使用简单的方法

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

单击链接时只需执行相同的操作：

$('.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

删除这个

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 回答