javascript - 通过获取当前 URL 替换 href 值

Question

我在 WordPress 中有一个使用 WP 菜单系统的菜单。所有链接基本上都是输出以下内容的自定义链接(为简洁起见，删除了 WP 类):

<ul>
<li><a href="http://mysite.com/about">About</a>
 <ul>
   <li><a href="http://mysite.com/about/#section-1">Section 1</a></li>
   <li><a href="http://mysite.com/about/#section-2">Section 2</a></li>
   <li><a href="http://mysite.com/about/#section-3">Section 3</a></li>
  </ul>
 </li>

<li><a href="http://mysite.com/services">Services</a>
 <ul>
   <li><a href="http://mysite.com/services/#section-1">Section 1</a></li>
   <li><a href="http://mysite.com/services/#section-2">Section 2</a></li>
   <li><a href="http://mysite.com/services/#section-3">Section 3</a></li>
   <li><a href="http://mysite.com/services/#section-4">Section 4</a></li>
  </ul>
 </li>
</ul>

如果正在查看父页面，我会尝试删除 URL 的域部分，因此如果我正在查看“关于”页面，菜单中的链接将更改为:

<li><a href="http://mysite.com/about">About</a>
 <ul>
   <li><a href="#section-1">Section 1</a></li>
   <li><a href="#section-2">Section 2</a></li>
   <li><a href="#section-3">Section 3</a></li>
  </ul>
</li>

<li><a href="http://mysite.com/services">Services</a>
 <ul>
   <li><a href="http://mysite.com/services/#section-1">Section 1</a></li>
   <li><a href="http://mysite.com/services/#section-2">Section 2</a></li>
   <li><a href="http://mysite.com/services/#section-3">Section 3</a></li>
   <li><a href="http://mysite.com/services/#section-4">Section 4</a></li>
  </ul>
 </li>

</ul>

我使用 jQuery 时遇到的问题是，我无法定位每个特定页面，因为这些页面是未知的，因此我需要它来获取 URL 并将其与菜单的正确部分相匹配以更改链接。我已经尝试过，但它太具体了:

if (window.location.href.indexOf("about") != -1) {

  //do something

} else {

  //do something else

}

编辑

我只想更改当前页面菜单中的链接。到目前为止的答案更改了菜单中的所有链接，我只想定位在同一页面上找到的链接。

Answer 1

DEMO here

首先在ul元素中添加一个类sections，以便于定位。

<ul class="sections">
    <li><a href="http://mysite.com/about/#section-1">Section 1</a>
    </li>
    <li><a href="http://mysite.com/about/#section-2">Section 2</a>
    </li>
    <li><a href="http://mysite.com/about/#section-3">Section 3</a>
    </li>
</ul>

使用.map()替换每个 anchor 的href。

编辑 - 基于您的新更新，我也喜欢@Archer 的更新。这应该可行。

$(".sections a[href* = '" + window.location.pathname + "/#']").map(function(){
    var currentsection = this.href.split('/').pop();
    this.href = currentsection;
});