使用jQuery将锚设置为活动 [英] Set anchor as active with jquery

问题描述

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

i have short question.. i got 3 content boxes and all have a menu with anchor-links to the content-boxes below! when i visit the site the first anchor is set ti active.. when i click now on no.2 in headline 1 it jumps to the 2nd anchor.. but the problem is i have to scroll a little bit above with the mousewheel to set the 2nd anchor as active.

，也向后. 当我单击anchor1的box3时.

and backwards too. when i click on box3 at anchor1..

有解决问题的想法吗?

在向上和向下滚动时可以完美工作！只需跳过锚定问题

这是演示: http://jsfiddle.net/wv9EQ/

这是JavaScript代码:

here is the javascript code:

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

i can't add active to all links! i include this small navi as php and its dynamic for all boxes! when i set all to active than are all anchors active :D

推荐答案

单击链接时，只需执行相同的操作即可.

Just do the same sort of thing when a link is clicked:

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

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

这篇关于使用jQuery将锚设置为活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！