如何替换链接中的哈希

Question

我想将网址的哈希添加到导航的 href 属性中：

<ul>
  <li><a href="/bla">Bla</a></li>
  <li><a href="/bli">Bli</a></li>
  <li ><a href="/blu">Blu</a></li>
</ul>

我有这个代码：

  $(window).on('hashchange', function (e) {
      console.log(location.hash);
      $("a").attr('href', function(_, href){
        return href + window.location.hash
      });
  });
  if (window.location.hash) {
      $(window).trigger('hashchange')
  }

现在，当我单击子菜单或使用哈希手动输入 url 时，菜单会像这样更新：

<ul>
  <li><a href="/bla#hashVlaue">Bla</a></li>
  <li><a href="/bli#hashVlaue">Bli</a></li>
  <li ><a href="/blu#hashVlaue">Blu</a></li>
</ul>

这是有效的。但是现在，如果我再次单击子菜单，则会附加哈希而不是替换。由于单击子菜单时页面未重新加载，因此链接开始如下所示：

<a href="/blu#hashOne#hashTwo#Three#Four">Blu</a>

我只想要一个哈希，如果已经有一个，它应该被替换。我该怎么做？

Answer 1

你总是在代码中追加href。检查回调hashchange中的行href + window.location.hash。这就是为什么它总是附加到以前的值。你需要的是

return href.split("#")[0] + window.location.hash

干杯:)