jquery - 如何在一个页面布局中添加和删除自动导航的事件类？

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 将鼠标悬停事件绑定(bind)到所有这些部分到一个函数来切换导航链接的事件类，如此

$('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