javascript - jQuery 使用 anchor 设置类处于事件状态

Question

我有一个像这样的菜单:

<ul>
    <li>
        <a class="scroll-to" href="#one">one</a>
    </li>
    <li>
        <a class="scroll-to" href="#two">two</a>
    </li>
    <li>
        <a class="scroll-to" href="#three">three</a>
    </li>
</ul>

在我的页面上，多个 anchor 如:

<a id="two" target="_blank"></a>

或

<a id="one" target="_blank"></a>

我正在寻找一种方法，当我滚动到 anchor (通过单击或鼠标滚动)时，为我的菜单设置事件类。

例如，如果我滚动到我的 anchor id="two"，我需要将我的 li #two 设置为事件状态。

有什么想法吗？

Answer 1

如果我理解您的问题，请将您的 anchor 添加到某个类，例如 section 并尝试以下操作:

$('.section').hover(function() {
  var anchor = $(this).attr('id');

    $('a[href="#'+anchor+'"]').addClass('active');

}, function() {
    $('a').removeClass('active');
});

http://codepen.io/tomekbuszewski/pen/MwMWoK