通過獲取當前URL替換href值

Question

我在使用WP菜單系統的Wordpress中有一個菜單。 所有鏈接基本上都是自定義鏈接，它們輸出以下內容（為簡潔起見，刪除了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

在這里演示

首先，將一個類sections添加到ul元素中，以使其易於定位。

<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()替換每個錨點的href 。

編輯-根據您的新更新＆我也喜歡@Archer的更新。 這應該工作。

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

Answer 2

另外一個選項...

$(function() {
    $("a[href*='" + window.location.pathname + "#']").attr("href", function() {
        return "#" + this.href.split("#")[1];
    });
});

這將找到當前頁面的所有鏈接，並在其中找到一個#並相應地修正href值。

Answer 3

嘗試這個，

$('a').each(function(){
   // check the anchor tab href has location.href or not
   if($(this).attr('href').indexOf(window.location.href) != -1)
   {
       // some code to replace location.href to blank
       var href=$(this).attr('href').replace(window.location.href,'');
       $(this).attr('href',href);
   }
});

或者，嘗試一下

$('a').each(function(){
   if(this.href.indexOf('#') != -1)
   {
       var href=this.href.split('#')[1];
       this.href = '#'+href;
   }
});