在#anchor 之前删除 href 中的部分 link？

Question

我的页面上有一个 link：

<li class="jump"><a href="http://example.com/#about">About Me</a></li>

如果可能，我想使用 jQuery 删除 jQuery 代码中的 'http://example.com/' part of any URL within a .jump class. Can you point me in the correct direction, with the simplest code possible? I want the code to remove anything before the hash, without specifying the URL (e.g. remove http://example.com/)。

谢谢！

Answer 1

我能想到的最简单的方法是使用锚字符 # 作为分隔符拆分 URL：

var url = $(".jump").attr("href"); // "http://example.com/#about"
var split_url = url.split("#");
var after_hash = split_url[1];

您的 after_hash 变量现在应包含值："about"。如果您打算将锚字符重新插入到 href 属性中，则需要将锚字符重新添加到该值。

因为在我看来您打算在多个 URL 上使用此功能，所以我建议将此代码放入一个函数中并在需要时调用。

Answer 2

您可以使用：

1) .each() 遍历所有锚点

2) 在出现 # 时拆分当前 href 并使用第二个数组元素

3) 将新的href与前面的#拼接起来，设置新的href

$('.jump a').each(function(){
  $(this).attr('href','#'+$(this).attr('href').split('#')[1]);
});

Answer 3

您可以使用 substring 和 lastIndexOf。

$(".jump a").each(function() {    
    var $this = $(this),
        href = $this.attr("href");

    $this.attr("href", href.substring(href.indexOf("#")));        
});

Answer 4

下面是我将如何使用 jQuery:

$(".jump a").each(function() {
    var newHref = $(this).attr("href").replace("http://example.com/", "");
    $(this).attr("href", newHref);
});

在#anchor 之前删除 href 中的部分 link？

Remove part of the link in a href before #anchor?

javascript

anchor

jquery

anchor-scroll