0

我正在使用单页网站，并且在到达相应内容时无法突出显示导航项。现在，我将简化我的代码。

HTML：

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">Lorem ipsum</div>
<div id="about">Lorem ipsum</div>
<div id="blog">Lorem ipsum</div>
<div id="contact">Lorem ipsum</div>

脚本：

$(document).ready(function() {
    // function that scrolls automatically to the content of a certain menu item. Just 
    // like scroll-to.js

    // .scroll event that automatically sets the "current" class to the list item when
    // when it reached its corresponding div.
});

当我向上和向下滚动页面时，这非常有效。问题是当我单击列表项时。例如，当前突出显示的项目是“主页”，然后我想通过单击它转到“联系人”。由于突出显示是在 .scroll 事件中操作的，因此“Home”和“Contact”之间的两个按钮也将突出显示，因为我的点击将通过它们从“Home”传递到“Contact”。

有什么办法可以忽略两者之间的项目吗？谢谢。

4

1 回答 1

0

从单击事件触发滚动事件时，使用具有不同命名空间的处理程序

$('li').on('click', function(){
  $(window).trigger('scroll.autoscroll');
});

$(window).on('scroll.autoscroll', function(){
  //whatever you want to happen on a scroll event triggered by a click event
});

或者您可以使用 .trigger 方法将数据传递给您的事件处理程序，例如： $(window).trigger('scroll', pass_some_data); 然后让您的事件处理程序根据传递的数据决定要做什么。

希望有帮助。我不能更具体，因为您基本上只是发布了一个带有注释行的空函数。

于 2013-06-14T04:20:21.977 回答