Question

我想做一些与本网站非常相似的事情：http://feed-the-beast.com/

当您点击导航链接时，页面将向下滑动到相应的ID，并以某种方式突出显示“活动”导航按钮。我怎样才能做到这一点？我也希望为多个页面执行此操作，因为我还将为论坛提供单独的页面。

编辑：我怎样才能完成向下滑动的页面？

Answer 1

HTML：

<nav>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    <a href="#four">Four</a>
    <a href="#five">Five</a>
</nav>

<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>

jQuery的：

$('nav a').on('click', function() {
    var activeDiv = $(this).attr('href');

    //setActiveMenuItem($(this));

    $('html, body').animate({
       scrollTop: $(activeDiv).offset().top
    }, 2000);        
});

$(window).on('scroll', function(e) {
    var bodyTop = $(document).scrollTop();

    $('div').each(function() {
        var offset = $(this).offset().top - $(window).scrollTop();

        if (offset >= 0) {
            setActiveMenuItem($(this).attr('id'));

            return false;
        }
    });
});

function setActiveMenuItem(id) {
    $('a[href=#' + id + ']').addClass('active');
    $('a[href=#' + id + ']').siblings().removeClass('active');
}

Answer 2

使用JavaScript（jQuery）软化的基本锚导航将起到作用。熟悉Firebug或Chrome的开发人员工具，了解该网站的完成情况。

Twitter Bootstrap提供ScrollSpy，这是一种位置检测机制，可能也很有用。 http://twitter.github.com/bootstrap/javascript.html#scrollspy

如何使用css / javascript显示活动页面/选项卡？

2 个答案: