如何在一个页面布局中添加和删除活动的 class 自动导航？

Question

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

我引用的是 Bootstrap 网站 - 您可以在右侧看到导航链接，当您滚动时，该部分发生变化，它会自动附加其活动 class。

参考URL：http://getbootstrap.com/components/

Answer 1

您可以向 html 文档的每个部分添加一个自定义属性，并将此属性的值设置为导航的 ID link 以显示该部分的活动状态。

<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 将鼠标悬停事件绑定到所有这些部分到一个函数来切换导航 links 的活动 class as 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

如何在一个页面布局中添加和删除活动的 class 自动导航？

How to add and remove active class automatic to navigation in one page layout?

css

navigation

jquery