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>

在我的页面上，多个锚点如下：

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

或

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

当我滚动到一个锚点（点击或鼠标滚动）时，我正在寻找一种方法将活动类设置到我的菜单。

例如，如果我滚动到我的主播id="two"，我需要设置有效的li #two。

有什么想法吗？

Answer 1

如果我了解您的问题，请将您的锚点添加到某个类中，例如section并尝试此操作：

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

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

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

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

Answer 2

var links = document.querySelectorAll("a.scroll-to");
console.log(links[1]);
for (var i = links.length -1; i>=0; i--)
{        
         //click event
         links[i].onclick= someHandlerFunction;
         //hover event
 		 links[i].onmouseover= someHandlerFunction;
}
var liActive = undefined;
function someHandlerFunction(event) {
    if (liActive != undefined) liActive.setAttribute("class", "");
    liActive = event.target.parentNode;
    liActive.setAttribute("class", "active");
    return false;
}

.menu{
     background-color: #00ff00;
}
.menu li.active{
     background-color: blue;
}

<ul class="menu">
    <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>

Voila（同时添加和删除类），它是一个但是在点击和悬停时添加活动类有点多余。

jQuery使用锚点设置类激活

2 个答案: