1394

如何href使用 jQuery 更改超链接的属性（链接目标）？

4

14 回答 14

1991

使用

$("a").attr("href", "http://www.google.com/")

将修改所有超链接的 href 以指向 Google。不过，您可能想要一个更精致的选择器。例如，如果您混合了链接源（超链接）和链接目标（又名“锚”）锚标签：

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...那么您可能不想不小心href为它们添加属性。为了安全起见，我们可以指定我们的选择器将只匹配<a>具有现有href属性的标签：

$("a[href]") //...

当然，您可能会有更有趣的想法。如果您想将锚点与特定的现有 匹配href，您可以使用如下内容：

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

这将找到href与字符串完全匹配的链接http://www.google.com/。一个更复杂的任务可能是匹配，然后只更新部分href：

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

第一部分仅选择 href以 .开头的链接http://stackoverflow.com。然后，定义了一个函数，该函数使用一个简单的正则表达式将这部分 URL 替换为新的部分。请注意这给您带来的灵活性 - 可以在此处对链接进行任何形式的修改。

于 2008-10-07T18:19:42.817 回答
304

使用 jQuery 1.6 及更高版本，您应该使用：

$("a").prop("href", "http://www.jakcms.com")

prop和之间的区别在于attr抓取attrHTML 属性而prop抓取 DOM 属性。

您可以在这篇文章中找到更多详细信息：.prop() 与 .attr()

于 2011-06-14T18:28:39.100 回答
87

attr在您的查找中使用该方法。您可以使用新值切换任何属性。

$("a.mylink").attr("href", "http://cupcream.com");
于 2008-10-07T18:20:45.687 回答
45

尽管 OP 明确要求提供 jQuery 答案，但如今您不需要对所有事情都使用 jQuery。

一些没有 jQuery 的方法：

  • 如果要更改所有href元素的值，请全部选择它们，然后遍历节点列表：（示例） <a>

    var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

  • 如果要更改所有实际具有属性href的元素的值，请通过添加属性选择器 ( ) 来选择它们：（示例）<a>href[href]a[href]

    var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

  • 如果要更改包含href特定值的<a>元素的值，例如，请使用属性选择器：（示例）google.coma[href*="google.com"]

    var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

    同样，您也可以使用其他属性选择器。例如：

    • a[href$=".png"]可用于选择值以 . 结尾的<a>元素。href.png

    • a[href^="https://"]可用于选择值以 . 为前缀的<a>元素。hrefhttps://

  • 如果要更改满足多个条件href的元素的值：（示例）<a>

    var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

..在大多数情况下不需要正则表达式。

于 2015-01-19T00:51:29.060 回答
44

根据您是想将所有相同的链接更改为其他内容，还是只想控制页面给定部分中的链接或单独控制每个链接，您可以执行其中之一。

将所有指向 Google 的链接更改为指向 Google 地图：

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

要更改给定部分中的链接，请将容器 div 的类添加到选择器中。此示例将更改内容中的 Google 链接，但不会更改页脚：

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

要更改单个链接而不考虑它们在文档中的位置，请将 id 添加到链接，然后将该 id 添加到选择器。此示例将更改内容中的第二个 Google 链接，但不会更改第一个或页脚中的链接：

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');
于 2008-10-17T17:58:41.657 回答
12

这样做的简单方法是：

Attr 函数（从 jQuery 版本 1.0 开始） 

$("a").attr("href", "https://stackoverflow.com/")

或者

道具功能（自 jQuery 版本 1.6 起）

$("a").prop("href", "https://stackoverflow.com/")

此外，上述方式的优点是，如果选择器选择单个锚点，它将仅更新该锚点，如果选择器返回一组锚点，它将仅通过一个语句更新特定组。

现在，有很多方法可以识别准确的锚点或锚点组：

很简单的：

  1. 通过标签名称选择锚点：$("a")
  2. 通过索引选择锚点： $("a:eq(0)")
  3. 为特定类选择锚点（如在此类中仅锚点与 class active）：$("a.active")
  4. profileLink 选择具有特定 ID（此处为示例ID）的锚点：$("a#proileLink")
  5. 选择第一个锚href：$("a:first")

更有用的：

  1. 选择所有具有 href 属性的元素：$("[href]")
  2. 选择具有特定 href 的所有锚点：$("a[href='www.stackoverflow.com']")
  3. 选择所有没有特定 href 的锚点：$("a[href!='www.stackoverflow.com']")
  4. 选择包含特定 URL 的 href 的所有锚点：$("a[href*='www.stackoverflow.com']")
  5. 选择以特定 URL 开头的所有带有 href 的锚点：$("a[href^='www.stackoverflow.com']")
  6. 选择所有以特定 URL 结尾的 href 锚点：$("a[href$='www.stackoverflow.com']")

现在，如果你想修改特定的 URL，你可以这样做：

例如，如果您想为所有访问 google.com 的 URL 添加代理网站，您可以按如下方式实现：

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });
于 2018-03-30T04:51:53.060 回答
10

当单击“menu_link”类的链接时调用此代码段，并显示链接的文本和 url。return false 防止链接被跟踪。

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});
于 2010-12-10T06:25:44.670 回答
9

停止使用 jQuery 只是为了它！仅使用 JavaScript 就非常简单。

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

于 2016-09-01T16:17:17.283 回答
6

href在属性中，因此您可以使用纯 JavaScript 更改它，但是如果您已经在页面中注入了 jQuery，请不要担心，我会以两种方式显示它：

想象一下你在href下面有这个：

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

你想改变它的链接......

使用没有任何库的纯 JavaScript，您可以执行以下操作：

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

但在jQuery中你也可以这样做：

$("#ali").attr("href", "https://stackoverflow.com");

或者

$("#ali").prop("href", "https://stackoverflow.com");

在这种情况下，如果您已经注入了 jQuery，那么 jQuery 可能看起来更短并且更跨浏览器......但除此之外，我选择了那个JS......

于 2019-01-19T01:16:02.250 回答
4 
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
于 2015-07-13T11:40:28.557 回答
3

更改 Wordpress Avada 主题徽标图像的 HREF

如果您安装 ShortCode Exec PHP 插件，您可以创建这个我称之为 myjavascript 的 Shortcode

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

您现在可以转到外观/小部件并选择一个页脚小部件区域并使用文本小部件添加以下短代码

[myjavascript]

选择器可能会根据您使用的图像以及它是否已准备好视网膜而改变，但您始终可以使用开发人员工具找出它。

于 2017-03-24T17:47:05.617 回答
3

试试这个;

$("#link").attr("href", "https://coenvink.com/")

代码功能的细分：

$("#link")

这部分代码获取 id 为“Link”的元素。在此之后，您将属性“href”（witch 基本上是链接到 url）设置为您的新 url，在这种情况下，witch 是我自己的网站：

.attr("href", "https://coenvink.com/")

我希望现在很清楚！

于 2021-11-22T10:48:21.777 回答
2

尝试

link.href = 'https://...'


link.href = 'https://stackoverflow.com'
<a id="link" href="#">Click me</a>

于 2020-06-21T19:00:53.617 回答
0 
<a class="link">My Link</a>
<script>
$(document).ready(function(){
    $("a.link").attr("href", "https://toptruyenfull.com/")
})
</script>
于 2021-04-12T10:18:08.957 回答