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将鼠标悬停事件绑定到所有这些部分到一个函数来切换活动类导航链接，因为这个

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

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

1 个答案: