Javascript 根据实际页面有条件地重写链接到锚

类似于但不完全相同

我正在开发一个wordpress网站，它的主菜单包含指向多个主页部分（example.com/index.php#anchor1、example.com/index.php#anchor2等）的链接和指向部分（example.com/contact）的链接。我已激活永久链接（/%postname%/）

而在主页上，所有的工作都很好：锚链接做滚动动画和部分链接的工作。但是从一个章节中，锚链接不起作用，只需指向“example.com/contact#anchor1”。以任何方式修改链接（使用“/”或“index.php”）都不会从节中加载锚定，或者在主页中重新加载页面，而不是滚动到所需的锚定

用户2840467在上述问题上使用的解决方案没有帮助，因为我使用的是一个自定义的post主页

那么：使用javascript或jquery，如何使用条件规则只重写节上的主菜单锚链接呢？因此，例如，菜单上的锚链接将是

，但在“example.com/contact”上，它会被重写为

其他信息：

这是我的菜单：

<ul class="uk-navbar-nav">
 <li><a href="#builder1">Home</a></li>
 <li><a href="#tm-main">Find a sale</a></li>
 <li><a href="#widget-text-63">How it works</a></li>
 <li><a href="#widget-text-61">Sign in</a></li>
 <li><a href="https://example.com/my-sales/">My sales</a></li>
 <li><a href="https://example.com/faq/">FAQ</a></li>
</ul>

您可以在javasript中获取url，下面是使用jQuery的方法

var current_url = window.location.href;
var hostname = window.location.origin;

  //compare two url to check if you are at homepage
  if(current_url != hostname){

    //for each a you need to change the href attribute
    //you should change .menu to your class or id so you will change only a elements inside your menu
    $('.menu a').each(function(){
      var href = $(this).attr('href');
      $(this).attr('href',hostname+'#'+href);
    });
  }

---

这似乎不是Javascript应该做的事情，而是服务器端，但这应该是可行的：

只需将类“cond link”添加到这些链接或更改jQuery选择器。也：

（请注意，CodePen使用iFrame，因此链接与画笔的链接不同，因此我必须手动设置它）

---

您想要javasript中的解决方案吗？请从页面中提供一些相关的HTML，以便我们可以看到div的ID或名称以及代表性示例的其他元素。@jwpfox在那里我指定了我正在使用的菜单。所有的主播都在主页上，只有在每个页面上都有相同的菜单时才能正常工作？@jwpfox是的，整个网站都一样谢谢你的回答。然而，我一直在尝试实施您的解决方案，但我无法使其工作。对不起，我不太懂javascript。我已将“.menu”更改为我的类，但还不知道如何应用href属性更改。例如，其中一个链接是#tm-main.On firefox inspector显示一个错误：“TypeError:$不是函数”，参考$（'.menu a'）。每个（函数（）{我怀疑您没有在页面上包含jQuery。如果您不知道如何在页面上包含jQuery，请阅读以下内容：@renato您应该在页面上包含jQuery，或者如果您已经包含jQuery，您需要确保此脚本在包含的jQuery文件之后运行。在我的解决方案中，您不必什么都不做，因为它会替换href attribtesdynamically@edisoni.1337好的，我设法让它工作。我按照这两个建议检查了jquery，并且已经被wordpress加载了。因此，正如在这个网站上的另一个问题上建议的那样，我添加了DOM就绪函数jquery（function（$）{，脚本重写了链接（我刚刚将$（this）.attr（'href'，hostname+'#'+href）；改为$（this）.attr（'href'，hostname+'/'+href）；因为标签已经在链接上了，但是斜杠没有。但是，尽管链接被正确重写（在inspector上检查），当单击时仍然指向同一页面，就像没有做任何更改一样。

var thisLink = window.location.pathname;
$('.cond-link').each(function(){
  var href = $(this).attr('href');
  if(href.match("^" + thisLink)) {
    var newHref = href.split('#')[1]
    $(this).attr('href', href.replace(thisLink, ''));
  }
});