使用 JQuery 将 class 添加到特定的 url 锚点

Question

我需要更改从一个部分滚动到另一个部分的菜单的颜色。当 url 包含特定锚点时，菜单应该改变颜色。我尝试了以下方法，但在这种情况下，仅当我位于特定锚点时菜单才会更改，并且当我再次滚动到另一个锚点时它不再更改。

$(document).ready(function() {
  if (window.location.href.indexOf("#7") > -1) {
    $('.menu_item a').css('color', '#000');
  } else {
    $('.menu_item a').css('color', '#fff');
  }
});

Answer 1

您还需要一个事件处理程序，它在哈希更改时也会触发，而不仅仅是在页面加载时触发，因为哈希更改不会重新加载页面。

$(document).ready(function() {
    $(window).on('hashchange', function() {
        if (window.location.href.indexOf("#7") > -1) {
            $('.menu_item a').css('color','#000');
        } else {
            $('.menu_item a').css('color','#fff');
        }
    });    
});

您也可以使用滚动事件，但由于哈希更改有一个特定的事件，并且必须更改哈希以获得不同的结果，您可能最好使用 hashchange 事件.

使用 JQuery 将 class 添加到特定的 url 锚点

Add class to specific url anchor with JQuery

anchor

jquery

scroll