Question

我创建了一个自定义菜单，并将其添加到页面的默认侧边栏中。该自定义菜单包含指向单个主页面上的锚点页面的链接。这些链接中的每一个都有自己的自定义css类（.feat1，.feat2）。

我试图根据当前网址更改链接颜色。我将通过/ url / portfolio /＃feat1，/ url / portfolio /＃feat2等导航（通过滚动或点击）

我尝试了很多CSS代码，而我最接近的就是这个

#nav_menu-2 .feat1 a:focus{
    color: #f00;
    background: #ff0;
}
//did this for .feat2 too

当我点击其中一个链接时，此更改并保持一种新颜色，但滚动到下一页时它不会更改为新链接。

我尝试了与 a：active 相同的代码，从我读到的内容应该是正确的代码来做我想要的，因为它实际上（应该）根据当前的url进行更改但是在此当它在滚动时更改URL时没有检测到它只会更改点击时间范围内的链接颜色（在此之后恢复为默认颜色）。

我也尝试过使用＆＃34; current-menu-item＆＃34;对于#sidebar类：

#sidebar .current-menu-item a:active{
    color: #f00;
    background: #ff0;
}

与使用个别课程相同，＆＃34;活跃＆＃34;仅更改单击时刻的颜色，然后当它将您发送到锚页面时，链接将恢复为默认值。

知道这里可能出现什么问题？

由于

Answer 1

CSS :active和:focus不会自行响应滚动事件。如果要根据滚动位置调整高光，则需要使用window.onscroll事件侦听器监视滚动位置。当滚动高度在与您的部分对应的范围内时，您可以将一个类分配给应该突出显示的导航元素。

有些图书馆可以为此提供帮助。各种库使用的通用名称是scrollspy。

一些图书馆：

如果您在纯JavaScript中自己实现它，我建议将事件处理程序包装在debounce函数中。这可以防止您的处理程序过于频繁地触发，这可能导致不必要的CPU /电池消耗并使滚动运动变得跳跃。

jQuery / Waypoints示例：

$("h2").waypoint(function(direction){
  $("#nav-menu a").removeClass("active");
  $("#nav-menu a[href='#" +this.element.id+"']").addClass("active");
});

wordpress侧边栏突出显示活动链接滚动并点击

1 个答案: