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


1267

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


12
对于那些你感兴趣的解决方案没有的jQuery的用法- stackoverflow.com/questions/179713/...
乔希克罗泽

1
对于较新的jQuery版本:stackoverflow.com/a/6348239/4928642
Qwertiy,2013年

1
没有jQuery的最简单示例stackoverflow.com/a/39276418/696535
Pawel

可能的解决方案的完整列表,一些有用的选择器以及获取正则表达式匹配项的值并使用它们来更新href的方法:stackoverflow.com/a/49568546/1262248
Aman Chhabra

Answers:


1830

使用

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


3
“在HTML中,元素名称不区分大小写,但在XML中,它们区分大小写。” - w3.org/TR/CSS21/selector.html
eyelidlessness

47
为了完整起见,由于有时仍与之链接,因此我将添加自jQuery 1.4以来的最后一个示例,无需使用each-现在可以使用以下代码:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
David Hedlund 2010年

14
@DavidHedlund轻微更正:您错过了href...return this.href.replace(/.../, '...'); });
Armstrongest

280

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

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

prop和之间的区别在于,attrattr获取HTML属性,而prop获取DOM属性。

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


32
为什么你应该使用一个解释propattr,将不胜感激,为人们未来的问题,并找到attr在新的jQuery版本工作显然非常细...
旺布尔

11
使用@womble prop的速度比attr更新速度快,因为它更新了dom而不是修改HTML。jsfiddle.net/je4G5
Popnoodles

2
@Popnoodles还有更多的问题,但是在这里无法解释所有问题太冗长了。因此,读者应该只看一下链接后的womble。然而,这里的总结将是很好的,否则,该信息将还挺丢失..
Rauni Lillemets

78

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

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

2
如果我在a标记中设置class =“ mylink”,则对我有用。只是想澄清一下,以防万一有人尝试设置与上面的答案类似的name =“ mylink”并期望它起作用。
cpuguru 2015年

40

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

更改所有指向Google的链接,使它们指向Google Maps:

<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/');

36

即使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>的元素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";
    });

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


9

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

3
我不太喜欢否决权,但是如果您不想说为什么要弃权,那么什么都没有实现,您也不必理会。
手工艺者2012年

2
拒绝投票,是因为您的代码段和答案无法回答原始问题,并且实际上并未提供任何解释说明为什么使用代码段获得的信息会有所帮助。
David Millar 2012年

5
对此进行否决是徒劳的。他/她在回答问题上的努力可能不如其他用户那么大,但是他/她确实提供了解决问题的代码。除了复制和粘贴定制解决方案外,OP还需要多加思考。
Ulises

8

这样做的简单方法是:

Attr函数(自jQuery 1.0版开始)

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

要么

Prop函数(自jQuery 1.6版开始)

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

同样,上述方式的优点在于,如果选择器选择单个锚,则只会更新该锚,并且如果选择器返回一组锚,则仅通过一条语句更新特定组。

现在,有很多方法可以识别确切的锚点或一组锚点:

很简单的一个:

  1. 通过标签名称选择锚点: $("a")
  2. 通过索引选择锚点: $("a:eq(0)")
  3. 选择特定类别的锚点(例如,在该类别中仅锚定class active):$("a.active")
  4. 选择具有特定ID的锚点(此处为示例profileLink 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. 选择所有带有href且包含特定URL的锚点: $("a[href*='www.stackoverflow.com']")
  5. 选择以特定网址开头的带有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);
    });
   });


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

2

更改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]

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


2

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可能看起来更短且跨浏览器更多...但是除此之外,我还是选择了jQuery JS

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.