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

【问题标题】：Highlighting the active anchor href via :target or jquery通过 :target 或 jquery 突出显示活动的锚点 href
【发布时间】：2013-03-08 07:17:52
【问题描述】：

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

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

jQuery 可以做到这一点吗？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

并且还要确保从兄弟姐妹中删除 newClass。所以... $('cb-toc li').on('click', function(){ $(this).addClass('newClass').siblings('li').removeClass('newClass'); });
我只是在寻找那个。尝试toggleClass无济于事。感谢 Jon +1。
我将活动类添加到锚点而不是 li。已经有 css 了。
我正在尝试：$('.cb-toca').click(function() { $(this).addClass('active').siblings('a').removeClass ('活动');})
...但由于某种原因它没有从兄弟姐妹中删除该类

【解决方案2】：

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

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

这个问题当然是你必须为每个锚点/链接对添加一个选择器，并且由于你已经在使用 jQuery 来操纵 TOC 的位置，所以坚持使用 jQuery 会更好、更清晰—— Jon Harding 提出的基于解决方案。

【讨论】：