设置主播与jQuery活跃(Set anchor as active with jquery)

2019-10-17 08:49发布

我有短的问题..我有3个内容框,均设有锚链接下面的内容盒的菜单! 当我访问的第一个锚设置TI活跃的网站..当我现在点击标题中的1就跳转到第2个锚二号..但问题是我必须滚动上面的滚轮设置一点点所述第二锚作为活性。

和倒退了。 当我点击BOX3在anchor1 ..

任何想法来解决这个问题?

WHEN上下滚动IT运行完美! 就在锚MADE问题JUMP

这里是演示: 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

Answer 1:

只是做了同样的事情点击一个链接时:

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

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



Answer 2:

为你的代码中使用的简单方法

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

  <li><a href="#2-SP" class="head-nav-button nav_2-SP active">2. SP.</a></li>


Answer 3:

删除此

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

而刚刚加入“主动”类在你需要它喜欢这里http://jsfiddle.net/wv9EQ/6/



文章来源: Set anchor as active with jquery