您如何使用 css/javascript 显示活动页面/选项卡？ [关闭]答案

【问题标题】：How do you show the active page/tab with css/javascript? [closed]您如何使用 css/javascript 显示活动页面/选项卡？ [关闭]
【发布时间】：2013-03-28 19:03:59
【问题描述】：

我想做一些和这个网站很相似的事情：http://feed-the-beast.com/

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

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

【问题讨论】：

页面右键查看源码。它似乎是一个普通的 Javascript 和 HTML。没什么神奇的
看源码，用javascript做的
我意识到它的普通 JS 哈哈，我对 JS 一点也不熟悉，但稍微解释一下，我可以很容易地学会它。我只是希望能够自己编辑它，而不仅仅是从该网站复制/粘贴（也是版权）

标签： javascript html css navigation

【解决方案1】：

在此处查看演示：http://jsfiddle.net/4sGmG/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');
}

【讨论】：

我对JS不是很熟悉。 Brothers() 和 animate() 函数有什么作用？这也包括像在 OP 中的网站上那样手动向下滚动页面吗？
siblings() 选择与所选元素处于同一级别的所有元素。 animate() 动画样式的变化，在这种情况下它向下滚动页面。不，它不包括手动滚动，但你也可以使用 jQuery / JavaScript 来做到这一点。
@Xzar 我已经更新了我的答案并添加了一个工作演示。你能接受答案吗？

【解决方案2】：

使用 JavaScript (jQuery) 软化的基本锚导航可以解决问题。熟悉 Firebug 或 Chrome 的开发人员工具，了解该站点是如何完成的。

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

【讨论】：

太好了，谢谢。我会看看这个。