Question

与Adding custom anchor links and page links in WordPress menu clash 类似，但不完全相同。

我正在使用wordpress网站，主菜单包含指向几个主页部分的锚点的链接（example.com/index.php#anchor1,example.com/index.php#anchor2等）以及指向部分的链接（example.com/contact）。我已激活永久链接（/％postname％/）。

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

解决方案user2840467对上述问题的使用没有帮助，因为我正在使用自定义帖子主页。

那么：如何用javascript或jquery完成一个条件规则来重写主菜单锚链接只在部分上？因此，例如，菜单上的锚点链接为<a href="#anchor1">Some anchor</a>，但在“example.com/contact”上，它会被重写为<a href="example.com/#anchor1">Some anchor</a>。

其他信息：

这是我的菜单：

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

Answer 1

你可以在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);
    });
  }

Answer 2

这似乎不是你应该用Javascript做的事情，而是服务器端，但这应该有效：

只需添加课程＆＃39; cond-link＆＃39;到那些链接或更改jQuery选择器。另外：Here is a working CodePen。

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

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, ''));
  }
});

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

2 个答案: