javascript - Set anchor as active with jquery - Stack Overflow

admin管理员组

文章数量:1026380

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.

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

any ideas to solve the problem?

WHEN SCROLLING UP AND DOWN IT WORKS PERFECT! JUST THE JUMP OVER THE ANCHOR MADE PROBLEMS

here is the demo: /

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');
            }  
        }
    });
});

EDIT: 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

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.

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

any ideas to solve the problem?

WHEN SCROLLING UP AND DOWN IT WORKS PERFECT! JUST THE JUMP OVER THE ANCHOR MADE PROBLEMS

here is the demo: http://jsfiddle/wv9EQ/

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');
            }  
        }
    });
});

EDIT: 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

• javascript
• jquery
• anchor

Share Improve this question Follow edited Nov 9, 2012 at 10:57 bernte asked Nov 9, 2012 at 10:43 berntebernte 1,18422 gold badges1919 silver badges3434 bronze badges 2

• Why do you need that for (i in sections). Isn't this the result you want jsfiddle/wv9EQ/6 ? – Mihai Commented Nov 9, 2012 at 10:50
• I only added the "active" css class to the corresponding <a/> tags in each section – Mihai Commented Nov 9, 2012 at 10:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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/wv9EQ/7/

for your code use the simple way

http://jsfiddle/wv9EQ/4/

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

Remove this

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

And just add the "active" class where you need it like here http://jsfiddle/wv9EQ/6/

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.

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

any ideas to solve the problem?

WHEN SCROLLING UP AND DOWN IT WORKS PERFECT! JUST THE JUMP OVER THE ANCHOR MADE PROBLEMS

here is the demo: /

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');
            }  
        }
    });
});

EDIT: 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

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.

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

any ideas to solve the problem?

WHEN SCROLLING UP AND DOWN IT WORKS PERFECT! JUST THE JUMP OVER THE ANCHOR MADE PROBLEMS

here is the demo: http://jsfiddle/wv9EQ/

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');
            }  
        }
    });
});

EDIT: 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

• javascript
• jquery
• anchor

Share Improve this question Follow edited Nov 9, 2012 at 10:57 bernte asked Nov 9, 2012 at 10:43 berntebernte 1,18422 gold badges1919 silver badges3434 bronze badges 2

• Why do you need that for (i in sections). Isn't this the result you want jsfiddle/wv9EQ/6 ? – Mihai Commented Nov 9, 2012 at 10:50
• I only added the "active" css class to the corresponding <a/> tags in each section – Mihai Commented Nov 9, 2012 at 10:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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/wv9EQ/7/

for your code use the simple way

http://jsfiddle/wv9EQ/4/

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

Remove this

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

And just add the "active" class where you need it like here http://jsfiddle/wv9EQ/6/

本文标签： javascriptSet anchor as active with jqueryStack Overflow