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~=#]")

另一种方法是创建一个简单的'nav'类，如果你想要一个链接作为导航类，只需做<a href="#about" class="nav">about us</a> - 做一个通用的catch-all可能会很难有常规的锚点。

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

一个页面网站使用Mootools Scroll + jQuery来突出Nav Anchor Links？

1 个答案: