如何替换 Link 中的 Hash

Question

我想将 url 的散列添加到导航的 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

干杯 :)

如何替换 Link 中的 Hash

How to replace Hash in Link

jquery

fragment-identifier