Question

我有一个锚链接菜单：

<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>

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

由于没有页面重新加载，我试图编写一个正在收听网址的函数：

$(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" );
});

我的想法是将网址中的哈希与类匹配。但我无法让它发挥作用。

更好的方法是将地址栏中的哈希值与href标记中的哈希值匹配，但那是我联盟中的哈希值。

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

});

Answer 1

编辑：oops，没有看到你想要它在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/

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

1 个答案: