jQuery使用锚点设置类激活

时间:2015-08-19 14:14:31

标签: javascript jquery

我有一个菜单:

<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

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

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

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

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

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

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

答案 1 :(得分:0)

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(同时添加和删除类),它是一个但是在点击和悬停时添加活动类有点多余。