题 如何使用jQuery更改超链接的href


如何使用jQuery更改超链接的href?


1090
2017-10-07 18:17


起源


对于那些对解决方案感兴趣的人 无 jQuery的用法 - stackoverflow.com/questions/179713/... - Josh Crozier
对于较新的jQuery版本: stackoverflow.com/a/6348239/4928642 - Qwertiy
没有jQuery的最简单的例子 stackoverflow.com/a/39276418/696535 - Pawel
可能的解决方案的完整列表,一些有用的选择器以及获取正则表达式匹配值的方法,并使用它们来更新href: stackoverflow.com/a/49568546/1262248 - Aman Chhabra


答案:


运用

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

将修改所有超链接的href以指向Google。你可能想要一个更精致的选择器。例如,如果您混合了链接源(超链接)和链接目标(a.k.a。“anchor”)锚标记:

<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的这一部分替换为新部分。请注意这为您提供的灵活性 - 可以在此处对链接进行任何类型的修改。


1610
2017-10-07 18:19



“在HTML中,元素名称不区分大小写,但在XML中它们区分大小写。” - w3.org/TR/CSS21/selector.html - eyelidlessness
为了完整性,因为它仍然偶尔链接,我将添加自jQuery 1.4以来,最后一个示例不需要使用 each  - 现在可以实现以下目标: $(selector).attr('href', function() { return this.replace(/.../, '...'); }); - David Hedlund
@DavidHedlund轻微纠正:你错过了 href: ...return this.href.replace(/.../, '...'); }); - Armstrongest
我用prop而不是attr,它对我有用。 - SolidSnake4444


使用jQuery 1.6及更高版本,您应该使用:

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

和...之间的不同 prop 和 attr 就是它 attr 抓取HTML属性,而 prop 抓住DOM属性。

你可以在这篇文章中找到更多细节: .prop()vs .attr()


251
2018-06-14 18:28



解释你应该使用的原因 prop 过度 attr 我们将不胜感激,因为有人会来找问题 attr 显然在较新的jQuery版本中工作得很好...... - womble
@womble使用 prop 比...更快 attr 因为它更新了dom而不是修改HTML。 jsfiddle.net/je4G5 - Popnoodles
@Popnoodles还有更多的问题,但在这里解释所有这些问题太冗长了。所以读者应该只看一下关联的帖子。但是,这里的摘要会很好,否则这些信息有点丢失.. - Rauni Lillemets


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

$("a.mylink").attr("href", "http://cupcream.com");

69
2017-10-07 18:20



如果我在a标签中设置class =“mylink”,这对我有用。只是想澄清一下,如果有人试图设置name =“mylink”类似于上面的答案并期望它能够工作。 - cpuguru


根据您是否要将所有相同的链接更改为其他内容,或者您​​希望仅控制页面的给定部分或每个部分中的链接,您可以执行其中一个。

更改所有指向Google的链接,以便他们指向Google地图:

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

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

要更改给定部分中的链接,请将容器div的类添加到选择器。此示例将更改内容中的Google链接,但不会更改页脚中的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/');

37
2017-10-17 17:58





尽管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.com,使用属性选择器 a[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> 元素与 href 值是 前缀 同 https://

  • 如果你想改变 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";
    });
    

..不需要正则表达式,in  案例。


29
2018-01-19 00:51





单击“menu_link”类的链接时会调用此代码段,并显示该链接的文本和网址。返回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;
});

8
2017-12-10 06:25



我对于投票不是很迂腐,但如果你不想说明为什么你投票失败,就没有什么可以实现的,你不应该打扰。 - crafter
由于您的代码段和答案没有回答原始问题,因此没有真正解释为什么使用该代码段获得的信息有用的原因。 - David Millar
向下投票这是迂腐的。他/她可能没有像其他用户那样花费他的答案,但他/她确实提供了解决问题的代码。除了复制和粘贴定制解决方案之外,OP还需要更多考虑。 - Ulises


为了它而停止使用jQuery!仅使用JavaScript非常简单。

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

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


6
2017-09-01 16:17



没有足够的jQuery。 - malckier


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

2
2017-07-13 11:40





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

如果您安装ShortCode Exec PHP插件,您可以创建我称为myjavascript的短代码

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

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

[myjavascript]

选择器可能会根据您使用的图像以及是否准备好视网膜而改变,但您可以通过使用开发人员工具来解决它。


1
2018-03-24 17:47