如何将活动类添加到菜单（基于 url 哈希）答案

【问题标题】：How to add active class to menu (based on url hash)如何将活动类添加到菜单（基于 url 哈希）
【发布时间】：2018-04-04 18:10:48
【问题描述】：

我有一个锚链接菜单：

<ul>
  <li class="anchorX"><a href="#anchorX">Bla</a></li>
  <li class="anchorY"><a href="#anchorY">Bli</a></li>
  <li class="anchorZ"><a href="#anchorZ">Blu</a></li>
</ul>

现在我想根据 url 中的当前哈希向 li 元素添加一个活动类。

由于不会重新加载页面，我尝试编写一个监听 te url 的函数：

$(window).on('hashchange', function() {
    //get the hash
    var adressBarHash = window.location.hash.replace("#",".");

    //now apply the class active to the link which contains the same hash as a class
    $("ul").find(adressBarHash).addClass( "active" );
});

我的想法是将 url 中的哈希与类匹配。但我无法让它工作。

更好的办法是将地址栏中的哈希与 href 标记中的哈希匹配，但这不符合我的要求。

$(window).on('hashchange', function() {
    var adressBarHash = window.location.hash;
    $('[href*=' + adressBarHash + ']').addClass('active')

});

【问题讨论】：

标签： jquery anchor

【解决方案1】：

编辑：哎呀，没看到你想要它在 li

你几乎拥有它。

$(window).on('hashchange', function() {
  let hash = window.location.hash;
  $('a').closest('li').removeClass('active');
  $('a[href="' + hash + '"]').closest('li').addClass('active');
});

https://jsfiddle.net/xpvt214o/47288/

【讨论】：

是否可以应用这个on hashchange 以及on pageload。如果有人有一个已经应用了哈希的书签并加载了它得到执行的站点。
哦，是的，我不明白为什么不这样做。我可以试试看。