使用 Mootools Scroll 的一页网站 + jQuery 突出显示导航锚链接？

Question

好吧，我距离解决问题还有大约 2 英寸，但现在我不知道如何继续。

开发站点： http://www.kendraschaefer.com/meilin

我正在使用 Mootools 和 jQuery同一页面来创建单页网站。 Mootools 处理页面滚动 - 页面在指定的 div 内上下滚动。

Jquery 处理所有其他效果。

问题是导航栏 - 我试图根据当前活动的 div 来突出显示导航项。

在意识到它并不能完全解决问题之前，我最终决定采用以下解决方案：

• MooTools 处理滚动
• Jquery 为单击的任何导航项分配“当前”类，并从任何其他导航项中删除“当前”类。

问题：我现在无法创建页内链接，因为页内链接没有以任何方式连接到导航。例如，在“主页”页面上，尝试单击内容区域中的“工作”或“团队”按钮 - 未选择适当的导航项目，并且我不知道如何使其工作。

也许我应该在滚动生效后通过 Mootools 添加类分配？ （如果你知道怎么做，请分享！）

或者也许我应该修改 Jquery？

欢迎任何和所有解决方案！谢谢！

Answer 1

var scroll = new Fx.Scroll('contentouter', {
    duration: 1000,
    wait: false,
    offset: {
        'x': -200,
        'y': -40
    },
    onStart: function() {
        // do it here str after click and before scroll
        $("a.current").removeClass("current");
        if (this.triggerEl)
            this.triggerEl.addClass("current");
    },
    onComplete: function() {
        // or have it here after the scroll is done

    },
    transition: Fx.Transitions.Quad.easeInOut
});

var scrollableLinks = $("a").filter(function(link) {
    var href = link.getProperty("href");
    return href && href.contains("#") && href.replace("#", '').length;
});

scrollableLinks.each(function(el) {
    el.addEvents({
        click: function(e) {
            new Event(e).stop();
            scroll.triggerEl = this;
            scroll.toElement(this.getProperty("href").replace("#", ''));
        }
    });
});

scrollableLinks 与您当前的标记配合使用，以获取所有具有 href 的页面链接，并且它包含 # 并且它不仅仅是 #

在更高版本（如 1.2、1.3）中，您可以将其应用于所有锚链接，如下所示：

document. getElements("a[href~=#]")

另一种方法是创建一个简单的“导航”类，如果您希望链接充当导航类，只需执行 关于我们 - 进行通用的包罗万象可能会使常规锚点变得困难。

更新的示例： http://www.jsfiddle.net/dimitar/WkTzr/6/ 其中第一个容器上的 TEAM 映像是复制顶部菜单链接的链接。