我有一个菜单:
<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
。
有什么想法吗?
答案 0 :(得分:0)
如果我了解您的问题,请将您的锚点添加到某个类中,例如section
并尝试此操作:
$('.section').hover(function() {
var anchor = $(this).attr('id');
$('a[href="#'+anchor+'"]').addClass('active');
}, function() {
$('a').removeClass('active');
});
答案 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(同时添加和删除类),它是一个但是在点击和悬停时添加活动类有点多余。