使用jquery将锚点设置为活动状态

时间:2012-11-09 10:43:42

标签: javascript jquery anchor

我有一个简短的问题..我有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');
            }  
        }
    });
});

编辑:我无法为所有链接添加活动!我把这个小的navi包含为php及其所有盒子的动态! 当我将所有活动设置为活动而不是所有锚定活动时:D

3 个答案:

答案 0 :(得分:1)

代码使用简单方法

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

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

答案 1 :(得分: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/

一样

答案 2 :(得分:1)

点击链接时,只需做同样的事情:

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

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