Question

我有一个单页HTML文档，用于分隔标签中的页面。导航栏的链接连接到包含数据索引和数据目标的部分（目标放在a href上）。

我的问题是如何在相应的部分编写一个jquery脚本，将链接更改为active？

Answer 1

当部分在当前视口中时，您可以使用inview jQuery插件添加“活动”类，并删除其他链接上的“活动”类。

<a href="link1" id="link1" class="headerNavLink">Link 1</a>
<a href="link2" id="link2" class="headerNavLink">Link 2</a>
<a href="link3" id="link3" class="headerNavLink">Link 3</a>

<div class="section" data-link-id="link1"></div>
<div class="section" data-link-id="link2"></div>
<div class="section" data-link-id="link3"></div>

jquery看起来像这样：

$(".section").bind('inview', function (event, visible) {
  if (visible) {
    $("#" + $(this).attr("data-link-id")).addClass("active");
  } else {
    $("#" + $(this).attr("data-link-id")).removeClass("active");
  }
});

有关详细信息，请查看https://github.com/protonet/jquery.inview

根据单个页面上的位置更改导航栏CSS

1 个答案: