jQuery重写href

Posted 2023-02-22

【中文标题】jQuery重写href

【英文标题】：jQuery rewrite href

【发布时间】：2011-02-08 05:55:14

【问题描述】：

我有一个 onclick 函数，我想将锚点添加到 href 值。我不想更改 URL，因为我需要该站点仍然可以为没有 javascript 的人/出于 SEO 目的而运行。所以这是我尝试使用的东西（以及其他东西）：

jQuery('a[rel=ajax]').click(function () jQuery(this).attr('href', '/#' + jQuery('a')); );

原始链接如下所示：

http://www.mysite.com/PopularTags/

URL 重写应该是这样的，这样 AJAX 才能工作：

http://www.mysite.com/#PopularTags

我可以通过将链接名称值设置为与 href 相同的值来获得一些 URL，但它不适用于带有子部分的链接：

http://www.mysite.com/Artist/BandName/

所以不太确定。感谢您的帮助。

【问题讨论】：

小节链接的重写应该是什么样的？

【参考方案1】：

我建议使用正则表达式，例如

$('a[rel=ajax]').click(function()
  $(this).attr('href', function()
    this.href = this.href.replace(/\/$/, "");
    return(this.href.replace(/(.*\/)/, "$1#"));
  );
);

【讨论】：

这是完美的解决方案。它允许我保留所有原始网址，并且只有相关的 ajax 网址在点击时发生更改。最终结果是这样的：“mysite.com/#PopularTags”。正是我需要的。希望它适用于我所有的其他链接。这将如何处理这样的网址：“mysite.com/Section1/Section2”？

我刚刚意识到，如果您点击一个已经处于活动状态的链接，它会不断添加锚点。那么如果已经存在锚点，我该如何防止它添加锚点？

@brandon14_99 不要在每次点击链接时更改href属性，只在加载文档时更改一次。将.click() 替换为.each()，它应该可以工作。

Mathias 正确，将 .click 替换为 .each 并放入 $(document).ready() 中。

【参考方案2】：

这取决于您如何在 html 中对链接进行编码。如果你使用这个链接到http://www.mysite.com/PopularTags/：

<a href="/PopularTags/">Popular Tags</a>

你可以简单地使用这个：

$(function() 
 $('a[rel=ajax]').each(function() 
  var actualHref = $(this).attr('href');
  this.href = '/#' + actualHref.substring(1, actualHref.length - 1); // cuts off the first and last characters (‘/’)
 );
);

这将产生以下 HTML：

<a href="/#PopularTags">Popular Tags</a>

请注意，我们可以设置this.href 而不是$(this).attr('href')，但我们仍然需要后者来获取实际的href 属性。 this.href 总是包含一个完整的 URI，包括协议、域名等——我们在这个例子中不需要这些。

【讨论】：

如果 href 的 url 前后没有斜线，这有点小问题，否则会是一个很好的解决方案。

@brandon14_99 在您的问题中，您说：“原始链接看起来像这样：http://www.mysite.com/PopularTags/”所以我假设您在整个网站上保持一致并像这样编写所有链接。如果您希望斜杠具有灵活性，请改用正则表达式。

【参考方案3】：

我相信类似的东西

jQuery(function()
  jQuery('a').each(function()
    jQuery(this).attr('href','/#'+jQuery(this).attr('href'));
  );
);

将完成这项工作。读作：在页面加载时，遍历所有链接，并将其 href 属性替换为 #old href。

【讨论】：

你可以设置this.href而不是$(this).attr('href')。本机 JavaScript ftw！ （不过，您仍然需要 $(this).attr('href') 来获取实际的 href 属性。）

这添加了“#”符号，但原始链接仍然出现在后面。最终结果是这样的：“mysite.com/#/PopularTags”