jquery - 通过 :target 或 jquery 突出显示活动的锚点 href

Question

在此页面上 > http://clickbump.com/65/

当您单击“本文中”功能的目录中的一个链接时，它会自动将内容滚动到视图中，并使用一个小 jquery 将 toc 小部件移动到与当前锚点相邻的位置。

理想情况下，我会使用 :target 属性来突出显示 toc 小部件中当前活动的部分。但是，我已经将它用于锚点本身。

jQuery可以做到这一点吗？

Answer 1

当有人很容易点击链接时，您可以添加一个类

$('.cb-toc li').click(function() {
    $(this).addClass('active').siblings('li').removeClass('active');
});

这是上面的工作 .jsfiddle

Answer 2

由于您似乎正在将文档中的 TOC 物理移动到锚点下方的位置，因此您可以使用纯 CSS 来做到这一点：

#bookmark2:target + .cb-toc a[href="#bookmark2"] {
  color: #444;
}

这样做的问题当然是您必须为每个锚/链接对添加一个选择器，并且由于您已经在使用 jQuery 来操纵 TOC 的位置，因此坚持使用基于 jQuery 的解决方案会更好、更清晰乔恩·哈丁提议。