Question

我在Wordpress中有一个使用WP Menu系统的菜单。所有链接基本上都是自定义链接，输出以下内容（为了简洁起见，删除了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

首先将一个类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。

编辑 - 基于您的新更新＆amp;我也喜欢@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;
   }
});

通过获取当前URL来替换href值

3 个答案: