如何在一页布局中自动添加和删除活动类导航？

Question

当有人向下滚动页面并且特定导航部分出现在一个页面布局中时，我想自动将活动类添加到导航栏链接。当任何人向上滚动页面时，活动类必须继续附加到导航链接中的特定部分。布局为一页。

我引用的是 Bootstrap 网站 - 当您滚动时，您可以在右侧看到导航链接，并且该部分会更改，它会自动附加其活动类。

参考网址：http://getbootstrap.com/components/

Answer 1

您可以为 html 文档的每个部分添加自定义属性，并将此属性的值设置为要在此部分中显示为活动的导航链接的 ID。

<section data-navlink="Link1">
...
</section>
<section data-navlink="Link2">
...
</section>
...

现在像这样定义你的导航栏

<ul id="navbar">
     <li id="Link1">My Link 1</li>
     <li id="Link2">My Link 2</li>
     ...
</ul>

现在使用 jquery 或 javascript 将所有这些部分的鼠标悬停事件绑定到一个函数，以将导航链接的活动类切换为 this

$('section[data-navlink]').on('mouseover',function(){
     $('.activenav').removeClass('activenav');
     $('li#'+$(this).attr('data-navlink')).addClass('activenav');
});

还有css，

.activenav{
text-decoration :underline;
color:red;
font-weight:bold;
}

Watch on fiddle